div#logout-confirm-modal .modal-dialog {
    max-width: 450px;
}


/* loader css start */

.loader {
    width: 48px;
    height: 48px;
    border: 3px dotted #FFF;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted #19B674;
    border-style: solid solid dotted;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* loader css end */


.loader2 {
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
}

.loader2::after,
.loader2::before {
    content: '';
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
}

.loader2::after {
    animation-delay: 1s;
}

@keyframes animloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.stepper-item {
    transition: opacity 0.5s ease, background-color 0.5s ease;
    opacity: 0.5; /* Less visible by default */
}

.stepper-item.complete {
    background-color: #f5f8fa;
    opacity: 1;
    padding: 5px !important;
    border-radius: 7px;
}

/*.btn {*/
/*    display: inline-flex;*/
/*    gap: 5px;*/
/*}*/

#otp_timer {
    /*transform: rotate(-90deg);*/
    transform-origin: center;
}

#otp_timer_circle {
    transition: stroke-dashoffset 1s linear;
}


div#otp_timer_container {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}


.form-control-white, .form-control-solid {
    border-color: #94BDD9 !important;
}


/* styles.css */
.form-control.shake {
    animation: shake 0.5s;
    border-color: red !important;
}


@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

a.menu-link.px-4.py-3.unread {
    background: #ededed;
}


/* loader design fixed from here */

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Make sure it's above other content */
}

.loader {
    width: 48px;
    height: 48px;
    border: 3px dotted #FFF;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* loader design fixed up to this */

span.btn.btn-info.btn-xs {
    padding: 2px 7px !important;
}


#tracking-body .timeline-label {
    width: 200px;
    margin-right: 10px;
}


#tracking-body.timeline-label:before {
    left: 201px;
}

#tracking-body .timeline-label:before {
    left: 201px;
}

div#notification-list {
    max-height: 250px;
    overflow-y: scroll;
}

.menu-item.mx-3 {
    margin-bottom: 1px;
}


span#file_missing_companies .warning-items,
span#expiring_companies .probation-items {
    display: grid;
    justify-content: start;
}


/* breadcrumb stepper css start */


/* --------------------------------

   Basic Style

   -------------------------------- */
#membership-steps .cd-breadcrumb, #membership-steps .cd-multi-steps {
    /*width: 90%;
    max-width: 768px;*/
    padding: 0.5em 1em;
    margin: 1em auto;
    background-color: #edeff0;
    border-radius: .25em;
}

#membership-steps .cd-breadcrumb:after, #membership-steps .cd-multi-steps:after {
    content: "";
    display: table;
    clear: both;
}

#membership-steps .cd-breadcrumb li, #membership-steps .cd-multi-steps li {
    display: inline-block;
    float: left;
    margin: 0.5em 0;
}

#membership-steps .cd-breadcrumb li::after, #membership-steps .cd-multi-steps li::after {
    /* this is the separator between items */
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5;
}

#membership-steps .cd-breadcrumb li:last-of-type::after, #membership-steps .cd-multi-steps li:last-of-type::after {
    /* hide separator after the last item */
    display: none;
}

#membership-steps .cd-breadcrumb li > *, #membership-steps .cd-multi-steps li > * {
    /* single step */
    display: inline-block;
    font-size: 1.4rem;
    color: #2c3f4c;
}

#membership-steps .cd-breadcrumb li.complete > *, #membership-steps .cd-multi-steps li.complete > * {
    /* selected step */
    color: #96c03d;
}

#membership-steps .no-touch .cd-breadcrumb a:hover, #membership-steps .no-touch .cd-multi-steps a:hover {
    /* steps already visited */
    color: #96c03d;
}

#membership-steps .cd-breadcrumb.custom-separator li::after, #membership-steps .cd-multi-steps.custom-separator li::after {
    /* replace the default arrow separator with a custom icon */
    content: '';
    height: 16px;
    width: 16px;
    background: url(../img/cd-custom-separator.svg) no-repeat center center;
    vertical-align: middle;
}

#membership-steps .cd-breadcrumb.custom-icons li > *::before, #membership-steps .cd-multi-steps.custom-icons li > *::before {
    /* add a custom icon before each item */
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
    vertical-align: middle;
}

#membership-steps .cd-breadcrumb.custom-icons li:not(.complete):nth-of-type(2) > *::before, #membership-steps .cd-multi-steps.custom-icons li:not(.complete):nth-of-type(2) > *::before {
    /* change custom icon using image sprites */
    background-position: -20px 0;
}

#membership-steps .cd-breadcrumb.custom-icons li:not(.complete):nth-of-type(3) > *::before, #membership-steps .cd-multi-steps.custom-icons li:not(.complete):nth-of-type(3) > *::before {
    background-position: -40px 0;
}

#membership-steps .cd-breadcrumb.custom-icons li:not(.complete):nth-of-type(4) > *::before, #membership-steps .cd-multi-steps.custom-icons li:not(.complete):nth-of-type(4) > *::before {
    background-position: -60px 0;
}

#membership-steps .cd-breadcrumb.custom-icons li.complete:first-of-type > *::before, #membership-steps .cd-multi-steps.custom-icons li.complete:first-of-type > *::before {
    /* change custom icon for the complete item */
    background-position: 0 -20px;
}

#membership-steps .cd-breadcrumb.custom-icons li.complete:nth-of-type(2) > *::before, #membership-steps .cd-multi-steps.custom-icons li.complete:nth-of-type(2) > *::before {
    background-position: -20px -20px;
}

#membership-steps .cd-breadcrumb.custom-icons li.complete:nth-of-type(3) > *::before, #membership-steps .cd-multi-steps.custom-icons li.complete:nth-of-type(3) > *::before {
    background-position: -40px -20px;
}

#membership-steps .cd-breadcrumb.custom-icons li.complete:nth-of-type(4) > *::before, #membership-steps .cd-multi-steps.custom-icons li.complete:nth-of-type(4) > *::before {
    background-position: -60px -20px;
}

@media only screen and (min-width: 768px) {
    #membership-steps .cd-breadcrumb, #membership-steps .cd-multi-steps {
        padding: 0 1.2em;
    }

    #membership-steps .cd-breadcrumb li, #membership-steps .cd-multi-steps li {
        margin: 1.2em 0;
    }

    #membership-steps .cd-breadcrumb li::after, #membership-steps .cd-multi-steps li::after {
        margin: 0 1em;
    }

    #membership-steps .cd-breadcrumb li > *, #membership-steps .cd-multi-steps li > * {
        /* font-size: 1.6rem;*/
    }
}

/* --------------------------------

Triangle breadcrumb

-------------------------------- */
@media only screen and (min-width: 768px) {
    #membership-steps .cd-breadcrumb.triangle {
        /* reset basic style */
        background-color: transparent;
        padding: 0 15px;
    }

    #membership-steps .cd-breadcrumb.triangle li {
        position: relative;
        padding: 0;
        margin: 4px 4px 4px 0;
    }

    #membership-steps .cd-breadcrumb.triangle li:last-of-type {
        margin-right: 0;
    }

    #membership-steps .cd-breadcrumb.triangle li > * {
        position: relative;
        padding: 0.5em 0.8em .6em 2.5em;
        color: #2c3f4c;
        background-color: #edeff0;
        /* the border color is used to style its ::after pseudo-element */
        border-color: #edeff0;
    }

    #membership-steps .cd-breadcrumb.triangle li.complete > * {
        /* selected step */
        color: #ffffff !important;
        background-color: #96c03d;
        border-color: #96c03d;
    }

    #membership-steps .cd-breadcrumb.triangle li:first-of-type > * {
        padding-left: 1.6em;
        border-radius: .25em 0 0 .25em;
    }

    #membership-steps .cd-breadcrumb.triangle li:last-of-type > * {
        padding-right: 1.6em;
        border-radius: 0 .25em .25em 0;
    }

    #membership-steps .no-touch .cd-breadcrumb.triangle a:hover {
        /* steps already visited */
        color: #ffffff;
        background-color: #2c3f4c;
        border-color: #2c3f4c;
    }

    #membership-steps .cd-breadcrumb.triangle li::after, #membership-steps .cd-breadcrumb.triangle li > *::after {
        /*
            li > *::after is the colored triangle after each item
            li::after is the white separator between two items
        */
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        content: '';
        height: 0;
        width: 0;
        /* 48px is the height of the <a> element */
        border: 19px solid transparent;
        border-right-width: 0;
        border-left-width: 20px;
    }

    #membership-steps .cd-breadcrumb.triangle li::after {
        /* this is the white separator between two items */
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #ffffff;
        /* reset style */
        margin: 0;
    }

    #membership-steps .cd-breadcrumb.triangle li > *::after {
        /* this is the colored triangle after each element */
        z-index: 2;
        border-left-color: inherit;
    }

    #membership-steps .cd-breadcrumb.triangle li:last-of-type::after, #membership-steps .cd-breadcrumb.triangle li:last-of-type > *::after {
        /* hide the triangle after the last step */
        display: none;
    }

    #membership-steps .cd-breadcrumb.triangle.custom-separator li::after {
        /* reset style */
        background-image: none;
    }

    #membership-steps .cd-breadcrumb.triangle.custom-icons li > *::before {
        /* reset style */
        margin-right: 0;
        background: none;
    }
}

/* --------------------------------

2  - Steps indicator

-------------------------------- */
#membership-steps .cd-multi-steps.text-top, #membership-steps .cd-multi-steps.text-bottom {
    border: 0;
    background-color: transparent;
}

#membership-steps .cd-multi-steps.text-top li, #membership-steps .cd-multi-steps.text-bottom li {
    position: relative;
    float: left;
    width: 25%;
    padding: 0 1.6em;
    text-align: center;
}

#membership-steps .cd-multi-steps.text-top li::before, #membership-steps .cd-multi-steps.text-bottom li::before {
    content: attr(data-step);
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.4rem;
    color: #ffffff;
    background-color: #96c03d;
    border-radius: 50%;
    margin: 0 auto;
}

#membership-steps .cd-multi-steps.text-top li:not(:last-of-type)::after, #membership-steps .cd-multi-steps.text-bottom li:not(:last-of-type)::after {
    /* this is the separator between items */
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 0;
    content: '';
    height: 2px;
    width: 100%;
    background-color: #96c03d;
    z-index: -1;
}

#membership-steps .cd-multi-steps.text-top li::after {
    top: auto;
    bottom: 8px;
}

#membership-steps .cd-multi-steps.text-top li > * {
    padding-bottom: 1.2em;
}

#membership-steps .cd-multi-steps.text-bottom li > * {
    padding-top: 1.2em;
}

#membership-steps .cd-multi-steps.text-top li.visited::before, #membership-steps .cd-multi-steps.text-bottom li.visited::before {
    /* visited steps */
    background-color: #2c3f4c;
}

#membership-steps .cd-multi-steps.text-top li.complete::before, #membership-steps .cd-multi-steps.text-bottom li.complete::before {
    /* complete step - green border color */
    background-color: #edeff0;
    border: 2px solid #96c03d;
}

#membership-steps .cd-multi-steps.text-top li.complete::after, #membership-steps .cd-multi-steps.text-bottom li.complete::after {
    /* replace the green separator with a grey one */
    background-color: #edeff0;
}

#membership-steps .cd-multi-steps.text-top li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom li:first-of-type::after {
    /* hide the separator on the left of the first item */
    width: 50%;
    left: 50%;
}

#membership-steps .cd-multi-steps.text-top li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom li:last-of-type::after {
    /* hide the separator on the right of the last item */
    width: 50%;
}

#membership-steps .cd-multi-steps.text-top li:first-of-type:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom li:first-of-type:last-of-type::after {
    /* hide the separator when there's only one item */
    display: none;
}

#membership-steps .cd-multi-steps.count li {
    color: #959fa5;
}

#membership-steps .cd-multi-steps.count li.visited, #membership-steps .cd-multi-steps.count li.complete {
    color: #96c03d;
}

@media only screen and (min-width: 768px) {
    #membership-steps .cd-multi-steps.text-top li, #membership-steps .cd-multi-steps.text-bottom li {
        text-align: center;
    }

    #membership-steps .cd-multi-steps.text-top li::before, #membership-steps .cd-multi-steps.text-bottom li::before {
        font-size: 1.6rem;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    #membership-steps .cd-multi-steps.text-top li.visited::before, #membership-steps .cd-multi-steps.text-bottom li.visited::before {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 767px) {
    #membership-steps .cd-multi-steps.text-top li:not(:last-of-type)::after, #membership-steps .cd-multi-steps.text-bottom li:not(:last-of-type)::after {
        /* reset style */
        width: calc(100% + 20px);
        left: calc(-50% - 10px);
    }

    #membership-steps .cd-multi-steps.text-top li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom li:first-of-type::after, #membership-steps .cd-multi-steps.text-top li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom li:last-of-type::after {
        display: none;
    }
}

/* --------------------------------

2  - Steps indicator - bullets

-------------------------------- */
#membership-steps .cd-multi-steps.text-top.icons li::before, #membership-steps .cd-multi-steps.text-bottom.icons li::before {
    display: none;
}

#membership-steps .cd-multi-steps.text-top.icons li:not(:last-of-type)::after, #membership-steps .cd-multi-steps.text-bottom.icons li:not(:last-of-type)::after {
    display: none;
}

#membership-steps .cd-multi-steps.text-top.icons li::after, #membership-steps .cd-multi-steps.text-bottom.icons li::after {
    /* this is the separator between items */
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 0;
    content: '';
    height: 2px;
    width: 100%;
    background-color: #96c03d;
    z-index: -1;
}

#membership-steps .cd-multi-steps.text-top.icons li::after {
    top: auto;
    bottom: 8px;
}

#membership-steps .cd-multi-steps.text-top.icons li > *, #membership-steps .cd-multi-steps.text-bottom.icons li > * {
    position: relative;
    padding-top: 20px;
}

#membership-steps .cd-multi-steps.text-top.icons li > *::before, #membership-steps .cd-multi-steps.text-bottom.icons li > *::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    height: 8px;
    width: 8px;
    background-color: #96c03d;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#membership-steps .cd-multi-steps.text-top.icons li.visited > *::before, #membership-steps .cd-multi-steps.text-bottom.icons li.visited > *::before {
    /* visited steps */
    background-color: #2c3f4c;
}

#membership-steps .cd-multi-steps.text-top.icons li.complete > *::before, #membership-steps .cd-multi-steps.text-bottom.icons li.complete > *::before {
    /* complete step - green border color */
    background-color: #edeff0;
    border: 2px solid #96c03d;
}

#membership-steps .cd-multi-steps.text-top.icons li.complete::after, #membership-steps .cd-multi-steps.text-bottom.icons li.complete::after {
    /* replace the green separator with a grey one */
    background-color: #edeff0;
}

#membership-steps .cd-multi-steps.text-top.icons li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom.icons li:first-of-type::after {
    /* hide the separator on the left of the first item */
    width: 50%;
    left: 50%;
}

#membership-steps .cd-multi-steps.text-top.icons li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.icons li:last-of-type::after {
    /* hide the separator on the right of the last item */
    width: 50%;
}

#membership-steps .cd-multi-steps.text-top.icons li:first-of-type:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.icons li:first-of-type:last-of-type::after {
    /* hide the separator when there's only one item */
    display: none;
}

@media only screen and (min-width: 768px) {
    #membership-steps .cd-multi-steps.text-top.icons li, #membership-steps .cd-multi-steps.text-bottom.icons li {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    #membership-steps .cd-multi-steps.text-top.icons li::after, #membership-steps .cd-multi-steps.text-bottom.icons li::after {
        /* reset style */
        width: calc(100% + 20px);
        left: calc(-50% - 10px);
    }

    #membership-steps .cd-multi-steps.text-top.icons li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom.icons li:first-of-type::after, #membership-steps .cd-multi-steps.text-top.icons li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.icons li:last-of-type::after {
        display: none;
    }
}

/* --------------------------------

3  - Steps indicator - numbers

-------------------------------- */
#membership-steps .cd-multi-steps.text-top.count li::before, #membership-steps .cd-multi-steps.text-bottom.count li::before {
    display: none;
}

#membership-steps .cd-multi-steps.text-top.count li:not(:last-of-type)::after, #membership-steps .cd-multi-steps.text-bottom.count li:not(:last-of-type)::after {
    display: none;
}

#membership-steps .cd-multi-steps.text-top.count li::after, #membership-steps .cd-multi-steps.text-bottom.count li::after {
    /* this is the separator between items */
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 0;
    content: '';
    height: 2px;
    width: 100%;
    background-color: #96c03d;
    z-index: -1;
}

#membership-steps .cd-multi-steps.text-top.count li::after {
    top: auto;
    bottom: 8px;
}

#membership-steps .cd-multi-steps.text-top.count li > *, #membership-steps .cd-multi-steps.text-bottom.count li > * {
    position: relative;
    padding-top: 20px;
}

#membership-steps .cd-multi-steps.text-top.count li > *::before, #membership-steps .cd-multi-steps.text-bottom.count li > *::before {
    content: attr(data-number);
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    height: 8px;
    width: 8px;
    font-size: 1.4rem;
    color: #ffffff;
    background-color: #96c03d;
    border-radius: 50%;
    line-height: 1;
    padding: 10px 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#membership-steps .cd-multi-steps.text-top.count li.visited > *::before, #membership-steps .cd-multi-steps.text-bottom.count li.visited > *::before {
    /* visited steps */
    background-color: #2c3f4c;
}

#membership-steps .cd-multi-steps.text-top.count li.complete > *::before, #membership-steps .cd-multi-steps.text-bottom.count li.complete > *::before {
    /* complete step - green border color */
    background-color: #edeff0;
    border: 2px solid #96c03d;
}

#membership-steps .cd-multi-steps.text-top.count li.complete::after, #membership-steps .cd-multi-steps.text-bottom.count li.complete::after {
    /* replace the green separator with a grey one */
    background-color: #edeff0;
}

#membership-steps .cd-multi-steps.text-top.count li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom.count li:first-of-type::after {
    /* hide the separator on the left of the first item */
    width: 50%;
    left: 50%;
}

#membership-steps .cd-multi-steps.text-top.count li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.count li:last-of-type::after {
    /* hide the separator on the right of the last item */
    width: 50%;
}

#membership-steps .cd-multi-steps.text-top.count li:first-of-type:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.count li:first-of-type:last-of-type::after {
    /* hide the separator when there's only one item */
    display: none;
}

@media only screen and (min-width: 768px) {
    #membership-steps .cd-multi-steps.text-top.count li, #membership-steps .cd-multi-steps.text-bottom.count li {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    #membership-steps .cd-multi-steps.text-top.count li::after, #membership-steps .cd-multi-steps.text-bottom.count li::after {
        /* reset style */
        width: calc(100% + 20px);
        left: calc(-50% - 10px);
    }

    #membership-steps .cd-multi-steps.text-top.count li:first-of-type::after, #membership-steps .cd-multi-steps.text-bottom.count li:first-of-type::after, #membership-steps .cd-multi-steps.text-top.count li:last-of-type::after, #membership-steps .cd-multi-steps.text-bottom.count li:last-of-type::after {
        display: none;
    }
}

a.current_step {
    background-color: #f27510 !important;
    border-color: #f27510 !important;
}


#membership-steps .cd-breadcrumb.triangle li.skipped > * {
    color: #ffffff !important;
    background-color: #00b2ff;
    border-color: #00b2ff;
}

#membership-steps .cd-breadcrumb.triangle li.complete.delivered > * {
    color: #ffffff !important;
    background-color: #96c03d !important;
    border-color: #96c03d !important;
}

.step-skipped {
    color: #00b2ff;
}

.step-pending {
    color: #edeff0;
    border: 1px solid #d2d2d2;
}

.step-completed {
    /* selected step */
    color: #96c03d;
}

.step-current {
    color: #f27510;
}

/* breadcrumb stepper css end */


section#membership-steps {
    z-index: 0;
}


/* circular progress start */

.step-circular-progress .progress-circle {
    font-size: 20px;
    margin: 20px;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;
    background-color: #F2E9E1;
    border-radius: 50%;
    line-height: 5em;
}

.step-circular-progress .progress-circle:after {
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: white;
    content: " ";
}

/* Text inside the control */
.step-circular-progress .progress-circle span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #53777A;
    z-index: 2;
}

.step-circular-progress .left-half-clipper {
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}

/* when p>50, don't clip left half */
.step-circular-progress .progress-circle.over50 .left-half-clipper {
    clip: rect(auto, auto, auto, auto);
}

.step-circular-progress .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(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 0.45em solid transparent;
    border-right-color: transparent;
    border-top-color: #A8E6A3; /* Light Green */
    border-bottom-color: #A8E6A3; /* Light Green */
    box-sizing: border-box;
}

.step-circular-progress .progress-circle.over50 .first50-bar {
    /* Progress bar for the first 50%, filling the whole right half */
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em);
    background-color: #A8E6A3; /* Light Green */
    border-radius: 50%;
    width: 5em;
    height: 5em;
}

.step-circular-progress .progress-circle:not(.over50) .first50-bar {
    display: none;
}

@keyframes progress-gradient {
    0% {
        border-top-color: #A8E6A3;
        border-bottom-color: #A8E6A3;
    }
    100% {
        border-top-color: #5DAD52;
        border-bottom-color: #5DAD52;
    }
}

.step-circular-progress .progress-circle.p0 .value-bar {
    display: none;
}

.step-circular-progress .progress-circle.p1 .value-bar {
    transform: rotate(4deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p2 .value-bar {
    transform: rotate(7deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p3 .value-bar {
    transform: rotate(11deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p4 .value-bar {
    transform: rotate(14deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p5 .value-bar {
    transform: rotate(18deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p6 .value-bar {
    transform: rotate(22deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p7 .value-bar {
    transform: rotate(25deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p8 .value-bar {
    transform: rotate(29deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p9 .value-bar {
    transform: rotate(32deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p10 .value-bar {
    transform: rotate(36deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p11 .value-bar {
    transform: rotate(40deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p12 .value-bar {
    transform: rotate(43deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p13 .value-bar {
    transform: rotate(47deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p14 .value-bar {
    transform: rotate(50deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p15 .value-bar {
    transform: rotate(54deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p16 .value-bar {
    transform: rotate(58deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p17 .value-bar {
    transform: rotate(61deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p18 .value-bar {
    transform: rotate(65deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p19 .value-bar {
    transform: rotate(68deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p20 .value-bar {
    transform: rotate(72deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p21 .value-bar {
    transform: rotate(76deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p22 .value-bar {
    transform: rotate(79deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p23 .value-bar {
    transform: rotate(83deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p24 .value-bar {
    transform: rotate(86deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p25 .value-bar {
    transform: rotate(90deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p26 .value-bar {
    transform: rotate(94deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p27 .value-bar {
    transform: rotate(97deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p28 .value-bar {
    transform: rotate(101deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p29 .value-bar {
    transform: rotate(104deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p30 .value-bar {
    transform: rotate(108deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p31 .value-bar {
    transform: rotate(112deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p32 .value-bar {
    transform: rotate(115deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p33 .value-bar {
    transform: rotate(119deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p34 .value-bar {
    transform: rotate(122deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p35 .value-bar {
    transform: rotate(126deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p36 .value-bar {
    transform: rotate(130deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p37 .value-bar {
    transform: rotate(133deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p38 .value-bar {
    transform: rotate(137deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p39 .value-bar {
    transform: rotate(140deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p40 .value-bar {
    transform: rotate(144deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p41 .value-bar {
    transform: rotate(148deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p42 .value-bar {
    transform: rotate(151deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p43 .value-bar {
    transform: rotate(155deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p44 .value-bar {
    transform: rotate(158deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p45 .value-bar {
    transform: rotate(162deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p46 .value-bar {
    transform: rotate(166deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p47 .value-bar {
    transform: rotate(169deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p48 .value-bar {
    transform: rotate(173deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p49 .value-bar {
    transform: rotate(176deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p50 .value-bar {
    transform: rotate(180deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p51 .value-bar {
    transform: rotate(184deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p52 .value-bar {
    transform: rotate(187deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p53 .value-bar {
    transform: rotate(191deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p54 .value-bar {
    transform: rotate(194deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p55 .value-bar {
    transform: rotate(198deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p56 .value-bar {
    transform: rotate(202deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p57 .value-bar {
    transform: rotate(205deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p58 .value-bar {
    transform: rotate(209deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p59 .value-bar {
    transform: rotate(212deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p60 .value-bar {
    transform: rotate(216deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p61 .value-bar {
    transform: rotate(220deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p62 .value-bar {
    transform: rotate(223deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p63 .value-bar {
    transform: rotate(227deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p64 .value-bar {
    transform: rotate(230deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p65 .value-bar {
    transform: rotate(234deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p66 .value-bar {
    transform: rotate(238deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p67 .value-bar {
    transform: rotate(241deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p68 .value-bar {
    transform: rotate(245deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p69 .value-bar {
    transform: rotate(248deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p70 .value-bar {
    transform: rotate(252deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p71 .value-bar {
    transform: rotate(256deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p72 .value-bar {
    transform: rotate(259deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p73 .value-bar {
    transform: rotate(263deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p74 .value-bar {
    transform: rotate(266deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p75 .value-bar {
    transform: rotate(270deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p76 .value-bar {
    transform: rotate(274deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p77 .value-bar {
    transform: rotate(277deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p78 .value-bar {
    transform: rotate(281deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p79 .value-bar {
    transform: rotate(284deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p80 .value-bar {
    transform: rotate(288deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p81 .value-bar {
    transform: rotate(292deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p82 .value-bar {
    transform: rotate(295deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p83 .value-bar {
    transform: rotate(299deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p84 .value-bar {
    transform: rotate(302deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p85 .value-bar {
    transform: rotate(306deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p86 .value-bar {
    transform: rotate(310deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p87 .value-bar {
    transform: rotate(313deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p88 .value-bar {
    transform: rotate(317deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p89 .value-bar {
    transform: rotate(320deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p90 .value-bar {
    transform: rotate(324deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p91 .value-bar {
    transform: rotate(328deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p92 .value-bar {
    transform: rotate(331deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p93 .value-bar {
    transform: rotate(335deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p94 .value-bar {
    transform: rotate(338deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p95 .value-bar {
    transform: rotate(342deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p96 .value-bar {
    transform: rotate(346deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p97 .value-bar {
    transform: rotate(349deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p98 .value-bar {
    transform: rotate(353deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p99 .value-bar {
    transform: rotate(356deg);
    animation: progress-gradient 1s linear forwards;
}

.step-circular-progress .progress-circle.p100 .value-bar {
    transform: rotate(360deg);
    animation: progress-gradient 1s linear forwards;
}


/* circular progress end */


.recent_notification_dots {
    overflow: hidden;
    max-width: 100%;
}


.bg-danger-outline {
    border: 1px solid #f1416c;
    border-radius: 5px;
}

.bg-warning-outline {
    border: 1px solid #ffc700;
    border-radius: 5px;
}


span.select2-dropdown.select2-dropdown--below,
span.select2-dropdown.select2-dropdown--above{
    background: white;
    border: 1px solid #eaeaea;
}

.person-body {
    border: 1px solid #3e4095;
    border-radius: 0 0 10px 10px;
}