:root {
    --primary-color: #0aa7ae;
    --color-red: #ff0000;
    --color-green: #006f19;
    --color-white: #fff;
    --color-black: #000;
}

.color-white,
.table-design th,
.status-active,
.status-inactive,
.context-menu-internal ul li:hover,
.right-panel-header,
.modal-header,
.toast .blue,
.toast .yellow,
.toast .teal-default,
.toast .blue .toast-header,
.toast .yellow .toast-header,
.toast .teal-default .toast-header,
.toast-header .close:hover,
.toast-header .close {
    color: var(--color-white);
}

.color-black {
    color: var(--color-black);
}

.primary-theme-color {
    color: var(--primary-color);
}

.color-danger {
    color: var(--color-red);
}

.color-green,
.color-success {
    color: var(--color-green);
}

.open-sidebar-min {
    display: none;
    transition: all .3s ease-in-out;
}

.header_top > .container {
    display: block;
}

.onlymobile {
    display: none;
}

#left-sidebar {
    height: 100vh;
}

    #left-sidebar .sidebar-nav {
        padding-top: 40px;
    }

.hright {
    bottom: 40px;
}

.metismenu ul a::before {
    font-family: 'FontAwesome' !important;
    content: "\f101";
}

.page-title {
    padding-top: 15px;
}

.copyright-fotter {
    font-size: small;
}

.box-bottom-bg {
    height: 4px;
    width: 100%;
    background: #06aeae;
    border-radius: 0px 0px 2px 2px;
}

.statistics-heading {
    text-align: center;
    font-size: 16px;
    /*color: #17a2b8;*/
    margin-top: 20px;
}

.header-action {
    display: block !important;
}

.theme-cyan #left-sidebar .metismenu > li.active.navmenu-item:not(.has-submenu) a,
.theme-cyan #left-sidebar .metismenu > li.active.navmenu-item.has-submenu .submenu li.active a,
.theme-cyan #left-sidebar .metismenu a:hover {
    color: var(--primary-color);
    background: var(--color-white);
    border-radius: 0px 100px 100px 0px;
}

.theme-cyan #left-sidebar .metismenu > li a i:first-child {
    width: auto;
    margin-right: 13px;
}

.theme-cyan #left-sidebar .metismenu > li a:hover i:first-child {
    font-size: 18px;
    transition: transform 1s;
    transform: rotate(360deg);
}

.metismenu a {
    padding: 10px 5px;
}

.submenu li {
    padding-left: 10px;
    margin-left: 10px;
}

#left-sidebar {
    padding: 20px 15px 20px 65px;
}

/* #header_top{
width: 55px;
} */

.user_div > .nav-tabs .nav-item a {
    color: #000;
}

.page-header-tab .nav-item:nth-child(2), .page-header-tab .nav-item:nth-child(3), .page-header-tab .nav-item:nth-child(5) {
    display: block;
}


.photo-upload-box {
    position: relative;
    border-radius: 5px;
    border: 1px solid #eee;
    padding: 20px;
    margin: 20px 0px;
}

.photo-upload-heading {
    padding: 5px 10px;
    background-color: var(--primary-color);
    top: -13px;
    left: 30px;
    color: var(--color-white);
    font-size: 12px;
    border-radius: 4px;
}

.photo-upload-heading,
.progress-circle:after,
.progress-circle > span,
.progress-circle .progress-bar,
.progress-circle .progress-value,
.hright,
.metismenu > li > a > .submenu-arrow {
    position: absolute;
}


.progress-circle {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    .progress-circle:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid var(--color-white);
        top: 0;
        left: 0;
    }

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

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

    .progress-circle .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 2px;
        border-style: solid;
        top: 0;
    }

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

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

        .progress-circle .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
            animation: loading-1 1.8s linear forwards;
        }

    .progress-circle .progress-value {
        width: 85%;
        height: 85%;
        border-radius: 50%;
        border: 2px solid #ebebeb;
        font-size: 18px;
        line-height: 100px;
        text-align: center;
        top: 7.5%;
        left: 7.5%;
    }

    .progress-circle.blue .progress-bar {
        border-color: #049dff;
    }

    .progress-circle.blue .progress-value {
        color: #049dff;
    }

    .progress-circle.blue .progress-left .progress-bar {
        animation: loading-2 1.5s linear forwards 1.8s;
    }

    .progress-circle.yellow .progress-bar {
        border-color: #fdba04;
    }

    .progress-circle.yellow .progress-value {
        color: #fdba04;
    }

    .progress-circle.yellow .progress-left .progress-bar {
        animation: loading-3 1s linear forwards 1.8s;
    }

    .progress-circle.pink .progress-bar {
        border-color: #ed687c;
    }

    .progress-circle.pink .progress-value {
        color: #ed687c;
    }

    .progress-circle.pink .progress-left .progress-bar {
        animation: loading-4 0.4s linear forwards 1.8s;
    }

    .progress-circle.green .progress-bar {
        border-color: #1abc9c;
    }

    .progress-circle.green .progress-value {
        color: #1abc9c;
    }

    .progress-circle.green .progress-left .progress-bar {
        animation: loading-5 1.2s linear forwards 1.8s;
    }

.metismenu ul a::before {
    left: 5px;
}

.metismenu > li > a > .submenu-arrow {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    transition: all .3s ease-in-out;
}

.custom-switch {
    display: inline-block;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.margin-top-20 {
    margin-top: 20px;
}

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

.padding-top-20 {
    padding-top: 20px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.display-flex {
    display: flex;
}

.status-active {
    background: #006100;
}

.status-inactive {
    background: #a90101;
}

.status-active,
.status-inactive {
    padding: 5px 9px;
    border-radius: 4px;
}

#txtEmail-error {
    display: block;
    color: red;
    font-size: 11px;
    position: absolute;
}

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

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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 990px) {
    .progress-circle {
        margin-bottom: 20px;
    }
}

.theme-cyan #header_top .nav-link.onlymobile {
    display: none;
}

option[default] {
    color: #bac5d8;
}

@media screen and (min-width: 768px) {
    body.offcanvas-active .open-sidebar-min {
        display: block;
    }

    .page-header .right {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 768px) {
    body.close_rightbar .open-sidebar-min {
        display: block;
        margin-top: 5px;
    }

    body.close_rightbar.offcanvas-active .open-sidebar-min {
        display: none;
    }

    .theme-cyan #header_top .nav-link.onlymobile {
        display: block;
    }
}

@media screen and (max-width:414px) {
    .header_top > .container {
        display: flex;
    }

    .mobile-none {
        display: none;
    }

    .onlymobile {
        display: block;
    }


    .hright {
        position: unset;
        bottom: 40px;
    }

    .page-header {
        display: none;
    }
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke: var(--color-white);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    width: 20px;
    height: 20px;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.uncheckmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke: var(--color-white);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: unfill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    width: 20px;
    height: 20px;
}

.uncheckmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #ff0000;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.uncheckmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes unfill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #ff0000;
    }
}

/* -------------- Context Menu ------------- */
.context-menu-wrapper {
    width: 250px;
    position: fixed;
    background: var(--color-white);
    z-index: 99999;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 2px 2px 4px -2px #000;
    visibility: hidden;
}

.context-menu-internal {
}

.context-menu-internal ul {
    list-style: none;
}

.context-menu-internal ul li {
    transition: all .2s ease-in-out;
    color: var(--primary-color);
    padding: 8px 15px;
    display: block;
    cursor: context-menu;
}

.context-menu-internal ul li:hover {
    background: var(--primary-color);
}

/* -------------- Process Animation ------------- */
.process-bar-value {
    animation: load 2s normal forwards;
    box-shadow: 0 10px 40px -10px var(--color-white);
    border-radius: 100px;
    background: var(--primary-color);
    height: 6px;
    width: 0;
}

/*@keyframes load {
  0% { width: 0; }
  100% { width: 68%; }
}*/

table.table.table-hover > tbody > tr.active {
    background: rgba(26, 188, 156, 0.16);
    position: relative;
}

table.table.table-hover > tbody > tr.active td:first-child {
    padding-left: 15px;
}

table.table.table-hover > tbody > tr.active:before {
    /*content:"";
    border-top: 5px;
    border-right: 5pc;
    height: 10px;
    width: 10px;
    background: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
}

table.table.table-hover > tbody > tr.active .right-arrow-row {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid red;
    border-bottom: 5px solid transparent;
    margin-top: 5px;
    position: absolute;
    left: 0;
}

.progress .progress-bar {
    /*animation: animateProgressBar 1.0s linear;*/
    /*-webkit-transition: width 2s ease;
	-moz-transition: width 2s ease;
	-o-transition: width 2s ease;
	transition: width 2s ease;*/
    transition: 1s width;
}

@keyframes animateProgressBar {
    0% {
        width: 0;
        /*background-position: 40px 0;*/
    }

    10% {
        width: 10%;
        /*background-position: 0 0;*/
    }

    20% {
        width: 20%;
    }

    30% {
        width: 30%;
    }

    40% {
        width: 40%;
    }

    50% {
        width: 50%;
    }

    60% {
        width: 60%;
    }

    70% {
        width: 70%;
    }

    80% {
        width: 80%;
    }

    90% {
        width: 90%;
    }

    100% {
        width: 100%;
    }
}

.table td, .table th {
    padding: .25rem;
}

.card-header {
    padding: 10px !important;
}

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

.card-body {
    padding: 15px 20px;
}

#righttab-statistics .card-body {
    padding: 0;
}

.theme-cyan.gradient #header_top {
    background: #069fa8 !important;
}

body *:hover::-webkit-scrollbar-thumb {
    background: #069fa8 !important;
}

body *::-webkit-scrollbar-thumb {
    background: #069fa8 !important;
}

.theme-cyan.gradient .btn-primary:hover {
    background: linear-gradient(145deg, #17a2b8, #00767d);
    border-radius: 5px 0px 5px 0px;
}

.nav-tabs .nav-link {
    padding: 10px 0 !important;
}

.box-bottom-bg {
    height: 4px;
    width: 100%;
    background: linear-gradient(45deg, #21ba45, #2185d0) !important;
    border-radius: 0px 0px 2px 2px;
}


@media screen and (max-width:414px) {
    #left-sidebar {
        padding: 60px 15px 20px 20px !important;
    }
}

.bootstrap-select .bs-ok-default::after {
    width: 0.3em;
    height: 0.6em;
    border-width: 0 0.1em 0.1em 0;
    transform: rotate(45deg) translateY(0.5rem);
}

.btn.dropdown-toggle:focus {
    outline: none !important;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
    border-radius: .25rem;
    border: 1px solid #E8E9E9;
}

.withoutspace .card-body {
    padding: 0px 0px 20px 0px;
}

.right-panel-header {
    padding: 5px 10px;
    background-color: #06aeae;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
    margin: 0;
    /*box-shadow: 0 3px 7px -2px #000;*/
}

.card-body-inner {
    padding: 10px 20px;
}

.login-user.profile-box .lightbox{
    display: block;
    width: 100%;
    overflow: hidden;
}

.document-uploaded-preview:not(.file-pdf) {
    width: 100%;
    height: 224px;
    max-width: 253px;
    max-height: 159px;
    margin-bottom: 10px;
}

.disp-block {
    display: block;
}

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

/* ------------------- Filter Dropdown options For Report */
.nav.filter-dropdown .dropdown-menu .dropdown-item:hover,
.nav.filter-dropdown .dropdown-menu .dropdown-item:active,
.nav.filter-dropdown .dropdown-menu .dropdown-item.active,
.nav.filter-dropdown .dropdown-menu .dropdown-item:focus {
    background-color: var(--primary-color);
    color: var(--color-white);
    border-bottom: 1px solid #00989e;
}

/*.nav.filter-dropdown .dropdown-menu .dropdown-item:active,
.nav.filter-dropdown .dropdown-menu .dropdown-item:focus{
    background-color: var(--primary-color);
    color: var(--color-white);
    border-bottom: 1px solid #00989e;
}*/

.document-action-options a:not(:last-child) i.fa {
    margin-right: 8px;
}

.modal-title {
    font-size: 18px;
}

.modal-header {
    /*background: linear-gradient( 45deg, #21ba45, #2185d0) !important;*/
    background: #07b0b0;
}

.modal-body {
    border-bottom: 2px solid #21ba45;
    background: linear-gradient(to bottom right, #edfff4 40%, #f5feea 100%);
}

.table-responsive > .table-bordered {
    border: 1px solid #dee2e6;
}

#left-sidebar .brand-name {
    text-align: center;
}

.btn-edit {
    background-color: #1777de;
    border-color: #0652a5;
}

.btn-edit,
.btn-edit:hover {
    color: var(--color-white);
}

.form-control,
.custom-select,
.bootstrap-select > .dropdown-toggle,
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
    border-color: #67D2D2;
}

.nav-tabs .nav-link.active {
    color: #007070;
    font-weight: 600;
}

.toast .blue {
    max-width: 350px;
    height: 150px;
    background-color: rgb(50, 118, 177);
    border-left: 5px solid #2b6497;
}

.toast .yellow {
    max-width: 350px;
    height: 150px;
    background-color: rgb(199, 145, 33);
    border-left: 5px solid #a97b1c;
}

.toast .teal-default {
    max-width: 350px;
    height: 150px;
    background-color: #06b0b0 !important;
    border-left: 5px solid #007070;
}

.toast .blue .toast-header,
.toast .yellow .toast-header,
.toast .teal-default .toast-header {
    background-color: transparent;
}

.alert.teal-default::after,
.alert.yellow::after,
.alert.blue::after {
    content: "\f0a2";
    font-family: FontAwesome;
    font-size: 46px;
    opacity: 0.2;
    position: absolute;
    right: 10px;
    bottom: 0;
}

.toast-header .close {
    opacity: 1 !important;
}

.bigboxicon {
    font-size: 30px;
    text-align: left;
    position: absolute;
    top: 100px;
    left: 6px;
    z-index: 0;
}

.alert {
    padding: 0px;
    margin-bottom: 0px;
}

.toast-body {
    padding: 1rem;
}

animate__slideInRight {
    padding-right: 20px;
}


.toast.show {
    transition: 0.15s ease-in-out;
    /*animation-delay: 2s;*/
}


.table-design thead {
    background: linear-gradient(145deg, #00b5ad, #17a2b8);
    background: -webkit-linear-gradient(145deg, #00b5ad, #17a2b8);
    color: var(--color-white) !important;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
    color: var(--color-white) !important;
}

.table.table-striped tbody tr:nth-of-type(2n) {
    background-color: rgba(0, 181, 173, 0.20);
}

.wrapper-application-status-inner .statistics-heading+.border{
    border: none !important;
    height: 2px;
    width: 0;
    background-color: #ccc;
    animation: animateProcessHeading 2s infinite;
}

.wrapper-application-status-inner .statistics-heading+.border:after{
    content: "";
    width: 100%;
    height: 2px;
    background-color: #ccc;
}

@keyframes animateProcessHeading{
    0%{
        background-color: #13fbcd;
        width: 0;
    }

    25%{
        background-color: #06aeae;
        width: 25%;
    }

    50%{
        background-color: #06aeae;
        width: 50%;
    }

    75%{
        background-color: red;
        width: 75%;
    }

    /*100%{
        background-color: red;
        width: 100%;
    }*/
}

/*.link-log-out i{
    color:#000;
}

.link-log-out i:hover{
    color:#ff0000;
}

.card{
border-color: #cbf2f1;
}*/

.success-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, #edfff4 40%, #f5feea 100%);
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    padding: 10px 15px;
    border: 1px solid #d5d5d5;
}

.success-box:hover {
    background: linear-gradient(to bottom right, #f5feea 40%, #edfff4 100%);
}

.profile-box {
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.profile-box::after {
    content: "";
    border-radius: 5px;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.profile-box:hover {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.profile-box:hover::after {
    opacity: 1;
}

.card {
    border-color: #cbf2f1;
}

/* Student View Personal Information */

.user-box{
    position:relative
}

.user-box h4{
    text-align:center;
    padding-top: 80px;
    font-size:14px;
    color:#fff;
}

.personal-info-box{
    margin:30px 10px 20px 20px;
            
}

.student-photo-view{
    position:absolute;
    width:100px;
    height:100px;
    top: -30px;
    left: 13%;
    /*border:1px solid #000;*/
    background:#fff;
    box-shadow: 0px 0px 7px 0px #000;
}

.student-photo-view img {
    display:block;
    margin:0 auto;
    width:100px;
    height:100px;
}

.student-sub-detail{
    color:#fff;
    text-align:center;
    padding-bottom: 10px;
    margin-top:30px;
}

.success-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, #edfff4 40%, #f5feea 100%);
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    padding:10px 10px;
    border:1px solid #d5d5d5;
}

.success-box:hover {
        background: linear-gradient(to bottom right, #f5feea 40%, #edfff4 100%);
}

.user-header{
    background:linear-gradient(45deg, #17a2b8, #75d5cd) !important;
    padding:5px 5px;
    border-radius: 5px 5px 0px 0px;
    width:100%;
    height:auto;
}
.user-header h5{
    color:#fff;
    text-align:center;
    margin-top:40px;
           
}
.user-header h6{
    color:#fff;
    text-align:center;
    font-size:12px;
}

.success-box table td{
    padding:10px 5px;
}
.login-user{
    position:relative;
    margin-top:50px;
    width:100%;
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    padding: 10px 15px;
    border: 1px solid #d5d5d5;
}

.dataTable,
.dataTables_scrollHeadInner,
.dataTables_scrollBody{
    width:100% !important;
}

.theme-cyan.gradient .btn-primary.active{
    background: linear-gradient(145deg, #3ea09c, #044954);
    background: linear-gradient(145deg, #2a8c88, #043b44);
}

.bootstrap-select .dropdown-menu{
    min-width: auto !important;
}

/* Document Verification Preview */
.wrapper-view-file-inner{
    position: relative;
}

.wrapper-view-file-inner .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    opacity: 0.4;
}

.wrapper-view-file-inner .close-file-preview{
    position: absolute;
    bottom: 10px;
    left: 50%;
}

.wrapper-file-preview-verify .btn-file-action:not(:last-child){
    margin-right: 5px;
}

.wrapper-view-file-inner{
    overflow: hidden;
}

#main_content .user_div{
    /*width: 340px;*/
}

/* ----------------- Fee Component Payment Associate -------------------- */
.wrapper-sidebar-payment-container{
    width: 75%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1040;
    transform: translateX(-100%);
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}

.wrapper-sidebar-payment-container .remove-side-wrapper{
    position: absolute;
    right: 10px;
    padding: 17px;
    top: 10px;
    cursor: pointer;
}

.wrapper-sidebar-payment-container .remove-side-wrapper:after,
.wrapper-sidebar-payment-container .remove-side-wrapper:before{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
    left: 0;

    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
}

.wrapper-sidebar-payment-container .remove-side-wrapper:after{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
}

.wrapper-sidebar-payment-container .remove-side-wrapper:before{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
}

.wrapper-sidebar-payment-container .payment-sidebar-inner{

}

/* Toggle this class to body element */
.show-fee-component-sidebar:before{
    position: absolute;
    content: "";
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    /*visibility: hidden;*/
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.show-fee-component-sidebar .wrapper-sidebar-payment-container{
    box-shadow: 0px 0 19px -6px #000;
}

.wrapper-sidebar-payment-container.active{
    transform: translateX(0%);
}

.wrapper-sidebar-payment-container.active .remove-side-wrapper:after, 
.wrapper-sidebar-payment-container.active .remove-side-wrapper:before{
    background: #fff;
}

.wrapper-sidebar-payment-container.active .remove-side-wrapper{
    right: -45px;
}

.show-fee-component-sidebar,
.show-ksam-sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* // ----------------- Fee Component Payment Associate -------------------- */



/* --------------- Heartbeat Loader ------------------ */
.pulse {
    height: 100px;
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.pulse:after {
    content: '';
    display: block;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200px 100px" enable-background="new 0 0 200px 100px" xml:space="preserve"><polyline fill="none" stroke-width="3px" stroke="teal" points="2.4,58.7 70.8,58.7 76.1,46.2 81.1,58.7 89.9,58.7 93.8,66.5 102.8,22.7 110.6,78.7 115.3,58.7 126.4,58.7 134.4,54.7 142.4,58.7 197.8,58.7 "/></svg>') 0 0 no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-animation: 2s pulse linear infinite;
    -moz-animation: 2s pulse linear infinite;
    -o-animation: 2s pulse linear infinite;
    animation: 2s pulse linear infinite;
    clip: rect(0, 0, 100px, 0);
}

.pulse:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    right: 2px;
    bottom: 0;
    top: 16px;
    margin: auto;
    height: 3px;
}


@-webkit-keyframes pulse {
    0% {
        clip: rect(0, 0, 100px, 0);
        opacity: 0.4;
    }

    4% {
        clip: rect(0, 66.66667px, 100px, 0);
        opacity: 0.6;
    }

    15% {
        clip: rect(0, 133.33333px, 100px, 0);
        opacity: 0.8;
    }

    20% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 1;
    }

    80% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 0;
    }

    90% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 0;
    }

    100% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        clip: rect(0, 0, 100px, 0);
    }

    4% {
        clip: rect(0, 66.66667px, 100px, 0);
    }

    15% {
        clip: rect(0, 133.33333px, 100px, 0);
    }

    20% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 1;
    }

    80% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        clip: rect(0, 300px, 100px, 0);
        opacity: 0;
    }
}

.upload-loader .center {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 90vh;*/
    margin-top: 9rem;
}

.upload-loader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    /*background: #fff;*/
    background-color: rgb(0,0,0,.7);
}

.upload-loader .loader-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    /* box-shadow: 0px 0 6px -2px #000; */
    padding: 4rem;
    border-radius: 6px;
    border: 1px solid #aaa;
}

/* // --------------- Heartbeat Loader ------------------ */

/* ---------------- Row Baxkground Color ----------------- */
.row-bg-indigo{
    background: #dbfeff;
}

.row-bg-indigo,
.row-bg-indigo button{
    color: #17a2b8;
}

.row-bg-indigo button:hover{
    color: #01575d;
}

.card-row{
    border-color: #84d4d8 !important;
}

.row-bg-indigo.collapsed .application-group-wrapper .arrow:before{
    content: "\f054";
}

.row-bg-indigo .application-group-wrapper .arrow:before{
    content: "\f078";
}

.row-bg-indigo:not(.collapsed){
    border-bottom: 1px solid #84d4d8;
}


/* ------------------- Side Panel Left to Right ------------------- */
.wrapper-sidebar-container-ksam{
    width: 75%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1051;
    transform: translateX(-100%);
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}

.wrapper-sidebar-container-ksam .remove-side-wrapper{
    position: absolute;
    right: 10px;
    padding: 17px;
    top: 10px;
    cursor: pointer;
}

.wrapper-sidebar-container-ksam .remove-side-wrapper:after,
.wrapper-sidebar-container-ksam .remove-side-wrapper:before{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
    left: 0;
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
}

.wrapper-sidebar-container-ksam .remove-side-wrapper:after{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
}

.wrapper-sidebar-container-ksam .remove-side-wrapper:before{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
}

.wrapper-sidebar-container-ksam .ksam-sidebar-inner{
    height: 100%;
    overflow: auto;
}

/* Toggle this class to body element */
.show-ksam-sidebar:before{
    position: absolute;
    content: "";
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    /*visibility: hidden;*/
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out;
}

.show-ksam-sidebar .wrapper-sidebar-container-ksam{
    box-shadow: 0px 0 19px -6px #000;
}

.wrapper-sidebar-container-ksam.active{
    transform: translateX(0%);
}

.wrapper-sidebar-container-ksam.active .remove-side-wrapper:after, 
.wrapper-sidebar-container-ksam.active .remove-side-wrapper:before{
    background: #fff;
}

.wrapper-sidebar-container-ksam.active .remove-side-wrapper{
    right: -45px;
}