@import "components-constant.css";
/* @import "../../storage/admin/styles/demo-components-constant.css"; */

html, body {
    height: 100%;
    /*min-height: 100%;*/
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    background: var(--vs-body-background-color);
    padding: 0rem;
    margin: 0rem;
}
* {
    padding: 0rem;
    margin: 0rem;
} 

p {
    margin:0rem;
    padding: 0rem;
}

h1, h2, h3, h4, h5, h6 {
    margin:0rem;
    padding: 0rem;
}

a:focus, a:hover {
    color: inherit;
    text-decoration: none;
}
sub {
    bottom: 0rem!important;
}
  
.vs-page-panel .table-responsive { 
    min-height: 25rem; 
} 

/*Width CSS Start*/
.width-1{
    width: 1rem!important;
}


/*Heights CSS Start*/
.min-max-height-90{
  min-height: 5.625rem;
  max-height: 5.625rem;
}
.min-max-height-95{
  min-height: 5.938rem;
  max-height: 5.938rem;
}
.min-max-height-100{
  min-height: 6.25rem;
  max-height: 6.25rem;
}
.min-max-height-105{
  min-height: 6.563rem;
  max-height: 6.563rem;
}
.min-max-height-110{
  min-height: 6.875rem;
  max-height: 6.875rem;
}
.min-max-height-115{
  min-height: 7.188rem;
  max-height: 7.188rem;
}
.min-max-height-120{
  min-height: 7.5rem;
  max-height: 7.5rem;
}
.min-max-height-125{
  min-height: 7.813rem;
  max-height: 7.813rem;
}
.min-max-height-130{
  min-height: 8.125rem;
  max-height: 8.125rem;
}
.min-max-height-140{
  min-height: 8.75rem;
  max-height: 8.75rem;
}
.min-max-height-145{
  min-height: 9.063rem;
  max-height: 9.063rem;
}
.min-max-height-150{
  min-height: 9.375rem;
  max-height: 9.375rem;
}
.min-max-height-155{
  min-height: 9.688rem;
  max-height: 9.688rem;
}
.min-max-height-160{
  min-height: 10rem;
  max-height: 10rem;
}
.min-max-height-165{
  min-height: 10.313rem;
  max-height: 10.313rem;
}
.min-max-height-170{
  min-height: 10.625rem;
  max-height: 10.625rem;
}
.min-max-height-175{
  min-height: 10.938rem;
  max-height: 10.938rem;
}
.min-max-height-180{
  min-height: 11.25rem;
  max-height: 11.25rem;
}
.min-max-height-185{
  min-height: 11.563rem;
  max-height: 11.563rem;
}
.min-max-height-190{
  min-height: 11.875rem;
  max-height: 11.875rem;
}
.min-max-height-195{
  min-height: 12.188rem;
  max-height: 12.188rem;
}
.min-max-height-200{
  min-height: 12.5rem;
  max-height: 12.5rem;
}
.min-max-height-205{
  min-height: 12.813rem;
  max-height: 12.813rem;
}
.min-max-height-210{
  min-height: 13.125rem;
  max-height: 13.125rem;
}
.min-max-height-215{
  min-height: 13.438rem;
  max-height: 13.438rem;
}
.min-max-height-220{
  min-height: 13.75rem;
  max-height: 13.75rem;
}
.min-max-height-225{
  min-height: 14.063rem;
  max-height: 14.063rem;
}
.min-max-height-230{
  min-height: 14.375rem;
  max-height: 14.375rem;
}
.min-max-height-235{
  min-height: 14.688rem;
  max-height: 14.688rem;
}
.min-max-height-240{
  min-height: 15rem;
  max-height: 15rem;
}
.min-max-height-245{
  min-height: 15.313rem;
  max-height: 15.313rem;
}
.min-max-height-250{
  min-height: 15.625rem;
  max-height: 15.625rem;
}
.min-max-height-255{
  min-height: 15.938rem;
  max-height: 15.938rem;
}
.min-max-height-260{
  min-height: 16.25rem;
  max-height: 16.25rem;
}
.min-max-height-265{
  min-height: 16.563rem;
  max-height: 16.563rem;
}
.min-max-height-270{
  min-height: 16.875rem;
  max-height: 16.875rem;
}
.min-max-height-275{
  max-height: 17.188rem;
  min-height: 17.188rem;
}
.min-max-height-280{
  max-height: 17.5rem;
  min-height: 17.5rem;
}
.min-max-height-285{
  max-height: 17.813rem;
  min-height: 17.813rem;
}
.min-max-height-290{
  max-height: 18.125rem;
  min-height: 18.125rem;
}
.min-max-height-295{
  max-height: 18.438rem;
  min-height: 18.438rem;
}
.min-max-height-300{
  max-height: 18.75rem;
  min-height: 18.75rem;
}
.min-max-height-305{
  max-height: 19.063rem;
  min-height: 19.063rem;
}
.min-max-height-310{
  max-height: 19.375rem;
  min-height: 19.375rem;
}
.min-max-height-315{
  max-height: 19.688rem;
  min-height: 19.688rem;
}
.min-max-height-320{
  max-height: 20rem;
  min-height: 20rem;
}
.min-max-height-340{
  max-height: 21.25rem;
  min-height: 21.25rem;
}
.min-max-height-345{
  max-height: 23.25rem;
  min-height: 23.25rem;
}

.z-index-control{z-index: unset!important;}

/*Page Container, Wrapper & Pannel Start*/
.container-wrapper {
    float: var(--vs-float-left);
    width: 100%;
    min-height: 100%;
    margin: 0 auto -3.125rem;
    padding: 0rem;
}
.main-container {
    float: var(--vs-float-left);
    width: 100%;
    margin: 3.6rem 0 4.6rem 0;
    padding: 0rem;
    overflow: visible;
    position: relative; 
}
.vs-page-container {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
.vs-page-wrapper {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
.vs-page-panel {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
/*Page Container, Wrapper & Pannel End*/

/* Page Heading Breadcrumbs Start*/

.vs-page-heading {
    float: var(--vs-float-left);
    width: 100%;
    min-height: 2.5rem;
    margin: 1.25rem 0;
    padding: 0rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.vs-page-breadcrumbs {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.vs-page-breadcrumbs h2 {
    float: var(--vs-float-left);
    margin: 0 1.25rem 0 0;
    padding: 0rem;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
}

.vs-page-breadcrumbs h2 span.vs-page-heading-count{
    float: var(--vs-float-right);
    margin: 0 0 0 0.625rem;
    padding: 0.313rem 0.625rem;
    background: var(--vs-primary-color);
    color: var(--vs-white-font-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-13);
    font-weight: var(--vs-font-weight-500);
    border-radius: 1.875rem;
}


.vs-page-breadcrumbs a {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0 1.875rem 0 1.25rem;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    text-decoration: underline;
    border-left: 0.063rem solid #444444;
    position: relative;
}
.vs-page-breadcrumbs a:after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: 0rem;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icons/arrow-left-breadcrumbs.svg) no-repeat;
    padding: 0rem;
    margin: 0rem;
}

.vs-page-breadcrumbs a.vs-next-level-breadcrumbs{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0 1.875rem 0 0;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    text-decoration: underline;
    border-left: 0;
    position: relative;
}

.vs-page-breadcrumbs a.vs-next-level-breadcrumbs:after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: 0rem;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icons/arrow-left-breadcrumbs.svg) no-repeat;
    padding: 0rem;
    margin: 0rem;
}

.vs-page-breadcrumbs h3 {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    position: relative;
}

.vs-page-breadcrumbs h3.vs-next-level-breadcrumbs{
    padding: 0 1.875rem 0 0;
}

.vs-page-breadcrumbs h3.vs-next-level-breadcrumbs:after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: 0rem;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icons/arrow-left-breadcrumbs.svg) no-repeat;
    padding: 0rem;
    margin: 0rem;
}

.vs-page-btn-col {
    float: var(--vs-float-right);
    margin: 0rem;
    padding: 0rem;
}
/* Page Heading Breadcrumbs End */

/* Login Page CSS Start */

.vs-login-page-bg {
    float: var(--vs-float-left);
    width: 100%;
    height: 100%;
    background: url(../images/background.jpg) center center no-repeat;
    background-size: cover;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    position: relative;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper {
    width: 100%;
    max-width: 22.5rem;
    margin: 0 auto!important;
    padding: 0rem;
    height: 100%;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table {
    width: 100%;
    height: 100%;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card {
    float: var(--vs-float-left);
    width: 100%;
    max-width: 100%;
    margin: 0rem;
    padding: 0rem;
    background: var(--vs-page-card-background-color);
    border: 0rem;
    box-shadow: var(--vs-page-card-box-shadow);
    border-radius: var(--vs-border-radius);
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-containt {
    float: var(--vs-float-left);
    width: 100%;
    padding: 1.25rem 0;
    margin: 0rem;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-header {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.938rem 2.5rem;
    margin: 0rem;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-header .vs-login-page-brand-logo {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem auto;
    text-align: center;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-header .vs-login-page-brand-logo img {
    width: 40%;
    padding: 0rem;
    margin: 0rem;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-header h1 {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0.938rem 0 0 0;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    text-align: center;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-body {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.938rem 2.5rem;
    margin: 0rem;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-footer {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.938rem 2.5rem 1.875rem 2.5rem;
    margin: 0rem;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-footer a {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-13);
    font-weight: var(--vs-font-weight-500);
    text-align: center;
}
.app.body-full.vs-login-page-bg .main-container.vs-login-page-container .vs-login-page-wrapper .vs-login-page-table .vs-login-page-card .vs-login-page-card-footer a:hover {
    text-decoration: underline;
}
.vs-login-page-forgot-password-icon {
    width: 1.125rem;
    height: 1.125rem;
    margin: -0.5rem 0 0 0;
}
.vs-login-page-toggle-password {
    position: var(--vs-position-absolute);
    right: 0.063rem;
    top: 1.563rem;
    padding: 1.188rem;
    text-align: center;
    border-radius: 0rem var(--vs-border-radius) var(--vs-border-radius) 0rem;
    cursor: pointer;
}
.vs-password-show-eye {
    background: #EBEBEB url(../images/icons/eyes-icon-gray.svg) no-repeat center center;
    background-size: 1.125rem;
}
.vs-password-hide-eye {
    background: #EBEBEB url(../images/icons/eyes-close-icon-gray.svg) no-repeat center center;
    background-size: 1.125rem;
}
/* No Result Found Start */

.no-result-found-section {
    background: transparent!important;
}
.no-result-found {
    float: var(--vs-float-left);
    width: 100%;
    margin: 3.125rem 0;
    padding: 0rem;
}
.no-result-found img {
    width: 10%;
    margin: 0rem;
    padding: 0rem;
}
.no-result-found h6 {
    float: var(--vs-float-left);
    width: 100%;
    text-align: center;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-24)!important;
    line-height: var(--vs-font-line-height-16);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-primary-color);
    margin: 1.25rem 0 0 0;
    padding: 0rem;
}
/* No Result Found End */

/* Manage Roles Page Table CSS Start*/

.vs-table-manage-roles tr td {
    vertical-align: top;
}
.vs-table-manage-roles tr td .fa.fa-plus-square-o {
    font-size: var(--vs-font-size-20);
    color: var(--vs-primary-color);
} 
.vs-table-manage-roles tr td .vs-form-element-checkbox label {
    position: unset;
}
/* Manage Roles Page Table CSS End*/

/* Setting Page Table CSS Start*/
.settings-npa-knock-off-clonable-table {
    float: left;
    width: 95%;
    margin: 0rem;
    padding: 0rem;
}
.settings-npa-knock-off-clonable-table tr td {
    margin: 0rem;
    padding: 0.313rem;
}
.clonable.clonable-clone .clonable-block.row .settings-npa-knock-off-clonable-table .translate.vs-form-element-label {
    opacity: 0;
}
.clonable.clonable-clone .clonable-block.row .settings-npa-knock-off-clonable-table span.vs-form-element-required-asterisk {
    opacity: 0;
}
.clonable-block .clonable-button-add.vs-secondary-button {
    position: absolute;
    top: 1.563rem;
    right: 0.938rem;
}
/* Setting Page Table CSS End*/

/* Add-colending-config Page Table CSS Start*/
.add-colending-config-clonable-table {
    float: left;
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
.add-colending-config-clonable-table tr th {
    margin: 0rem;
    padding: 0.313rem;
}
.add-colending-config-clonable-table tr td {
    margin: 0rem;
    padding: 0.313rem;
    vertical-align: top;
}
/* Add-colending-config Page Table CSS Start*/

/* Add-colending-config-charge Page Table CSS Start*/
.add-colending-config-charge-table {
    float: left;
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
.add-colending-config-charge-table tr th {
    margin: 0rem;
    padding: 0.313rem;
}
.add-colending-config-charge-table tr td {
    margin: 0rem;
    padding: 0.313rem;
    vertical-align: top;
}
/* Add-colending-config Page Table CSS Start*/

.slab-main {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0 0 1.25rem 0;
    padding: 0 0 1.25rem 0;
    border-bottom: 0.063rem solid var(--vs-table-border-color);
} 

 
.usage-show-hide.usage-show{
    display: block;
}
.usage-show-hide.usage-hide{
    display: none;
} 


/* All Chart CSS Start*/
.vs-chat-purple-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #962DFF;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-purple-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #E0C6FD;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-gray-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #DDDDDD;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-blue-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #4A3AFF;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-blue-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #C6D2FD;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-green-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #2AB662;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-green-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #80D1A1;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-yellow-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #EBD588;
    margin: 0rem;
    padding: 0rem;
}
.vs-chat-light-red-tag{ 
    float: left;
    width: 0.563rem;
    height: 0.563rem;
    border-radius: 100%; 
    background: #F68070;
    margin: 0rem;
    padding: 0rem;
}
.vs-sidebar-toggle-container.vs-sidebar-menu-expanded-container .sanctioned-chart{
  left: 1.5rem!important;
}

.vs-sidebar-toggle-container.vs-sidebar-menu-expanded-container .sanctioned-chart svg{
    left: -2.2rem!important;
    position: relative;
}
.outer {
  position: relative;
  width: 600px;
  height: 400px;
}  
.sanctioned-chart-column{
    float: var(--vs-float-left)
    width: 100%; 
    height: 100%;
    padding: 0rem;
    margin: 0rem; 
    position: var(--vs-position-relative);
}
.sanctioned-chart { 
    width: 100%;
    height: 100%;
    max-width: 100%!important;
    max-height: 100%!important;
    text-align: center;
    margin: 0rem auto;  
    padding: 0rem;
    display: block; 
    vertical-align: top; 
    overflow: visible;
    position: var(--vs-position-relative);
    top: -5.5rem;
}
.sanctioned-chart text{display: none;}

.sanctioned-chart-column .chart-infotext{
    
    float: var(--vs-float-left)
    width: 100%;  
    padding: 0rem;
    margin: 0rem; 
    position: var(--vs-position-absolute);
    left: 0rem; 
    right: 0rem; 
    bottom: 4rem; 
}
.sanctioned-chart-column h4{ 
    text-align: center;
    float: left;
    width: 100%;
    margin:0 0 1rem 0;
    padding: 0rem;
    font-size: var(--vs-font-size-20);
    line-height: var(--vs-font-line-height-20);
    color: var(--vs-secondary-font-color);
}
.sanctioned-chart-column h6{ 
    text-align: center;
    float: left;
    width: 100%;
    margin:0rem;
    padding: 0rem;
    font-size: var(--vs-font-size-17);
    line-height: var(--vs-font-line-height-17);
    color: var(--vs-secondary-font-color);
}
/*.sanctioned-chart-column svg{
    max-width: 100%!important;
    max-height: 100%!important;
    text-align: center;
    margin: 0 auto;
    display: block;
}*/
.drawdown-trend-chart-column{
    float: var(--vs-float-left);
    width: 100%;  
    padding: 0rem;
    margin: 0rem;  
}
.drawdown-trend-chart-column .drawdown-trend-chart {  
   float: var(--vs-float-left);
    width: 100%;  
    padding: 0rem;
    margin: 0rem;  
}
.drawdown-trend-chart-column .drawdown-trend-chart #drawdown-trend{
  float: var(--vs-float-left);
    width: 100%; 
    height: 100%;
    padding: 0rem;
    margin: 0rem;
}
.chart-filled {
    fill: #4A3AFF; 
}
.chart-empty {
    fill: #E5EAFC; 
}
.needle,
.needle-center {
    display: none;
}
.ball {
    fill: #4A3AFF;
    stroke: white;
    stroke-width: 0.375rem;
} 
.chartjs-wrapper {
  margin:0 auto;
  width: 32vw;
  height: auto;
} 

.vs-word-limit{
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1; 
           line-clamp: 1; 
   -webkit-box-orient: vertical;
}

canvas#overdue{
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
  max-height: 100%!important; 
}

canvas#total-outstanding{
  width: auto!important;
  height: auto!important;
  max-width: 100%!important;
  max-height: 100%!important; 
}

canvas#sanctioned-amount{ 
  max-width: 100%!important;
  max-height: 100%!important; 
}

.swal-button--cancel{ 
  color: var(--vs-tertiary-button-font-color)!important;
  background-color: var(--vs-transparent-background-color)!important;
  border-radius: var(--vs-border-radius)!important;
  border: 0.063rem solid var(--vs-tertiary-border-color)!important; 
} 
.swal-button--cancel:hover{
  background-color: var(--vs-tertiary-button-hover-background-color)!important;
  color: var(--vs-tertiary-button-hover-font-color)!important; 
}
.min-height-auto{
  min-height: auto!important;
}