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

html, body {
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
}

/*Font Family*/
.vs-font-family {
    font-family: var(--vs-font-family);
}

/* Font colors */
.vs-primary-font-color{
   color:var(--vs-primary-font-color)!important;
}
.vs-primary-second-font-color{
   color:var(--vs-primary-second-font-color)!important;
}
.vs-secondar-font-color{
   color:var(--vs-secondary-font-color)!important;
}
.vs-regular-font-color{
   color:var(--vs-regular-font-color)!important;
}
.vs-white-font-color{
   color:var(--vs-white-font-color)!important;
}
.vs-black-font-color{
   color:var(--vs-black-font-color)!important;
}
.vs-success-status-font-color{
    color: var(--vs-success-status-color)!important;
}
.vs-danger-status-font-color{
    color: var(--vs-status-danger-color)!important;
}
.vs-warning-status-font-color{
    color: var(--vs-status-warning-color)!important;
}
.vs-info-status-font-color{
    color: var(--vs-status-info-color)!important;
}


/*Font Sizes*/
.vs-font-size-10 {
    font-size: var(--vs-font-size-10)!important;
}
.vs-font-size-12 {
    font-size: var(--vs-font-size-12)!important;
}
.vs-font-size-13 {
    font-size: var(--vs-font-size-13)!important;
}
.vs-font-size-14 {
    font-size: var(--vs-font-size-14)!important;
}
.vs-font-size-15 {
    font-size: var(--vs-font-size-15)!important;
}
.vs-font-size-16 {
    font-size: var(--vs-font-size-16)!important;
}
.vs-font-size-18 {
    font-size: var(--vs-font-size-18)!important;
}
.vs-font-size-20 {
    font-size: var(--vs-font-size-20)!important;
}
.vs-font-size-22 {
    font-size: var(--vs-font-size-22)!important;
}
.vs-font-size-24 {
    font-size: var(--vs-font-size-24)!important;
}
.vs-font-size-26 {
    font-size: var(--vs-font-size-26)!important;
}
.vs-font-size-28 {
    font-size: var(--vs-font-size-28)!important;
}
.vs-font-size-30 {
    font-size: var(--vs-font-size-30)!important;
}

/*Font Weightages*/
.vs-font-weight-100 {
    font-weight: var(--vs-font-weight-100)!important;
}
.vs-font-weight-300 {
    font-weight: var(--vs-font-weight-300)!important;
}
.vs-font-weight-400 {
    font-weight: var(--vs-font-weight-400)!important;
}
.vs-font-weight-500 {
    font-weight: var(--vs-font-weight-500)!important;
}
.vs-font-weight-600 {
    font-weight: var(--vs-font-weight-600)!important;
}
.vs-font-weight-700 {
    font-weight: var(--vs-font-weight-700)!important;
}
.vs-font-weight-800 {
    font-weight: var(--vs-font-weight-800)!important;
}
.vs-font-weight-900 {
    font-weight: var(--vs-font-weight-900)!important;
}

/* HR Divider*/
.vs-divider {
    display: block;
    flex: 1 1 100%;
    height: 0;
    max-height: 0;
    transition: inherit;
    border-color: #EBEBEB;
    border-style: solid;
    border-width: thin 0 0 0;
}

.vs-divider-vertical {
    align-self: stretch;
    border-width: 0 thin 0 0;
    display: inline-flex;
    height: inherit;
    margin-left: -0.063rem;
    max-height: 100%;
    max-width: 0;
    vertical-align: text-bottom;
    width: 0;
}

/*Display*/
.vs-display-block {
    display: var(--vs-display-block);
}
.vs-display-inline-block {
    display: var(--vs-display-inline-block);
}
.vs-display-none {
    display: var(--vs-display-none);
} 
.vs-display-inherit {
    display: var(--vs-display-inherit);
}

.vs-display-flex{
    display: flex;
}
.vs-display-inline-flex{
    display: inline-flex;
}
.vs-display-grid{
    display: grid;
}
.vs-display-inline-grid{
    display: inline-grid;
} 


/* Flex Wrap */
.flex-wrap-nowrap {
    flex-wrap: nowrap!important;
} 
.flex-wrap {
    flex-wrap: wrap!important;
}

/* Flex Direction Row */
.flex-direction-row {
    flex-direction: row!important;
}
.flex-direction-column {
    flex-direction: column!important;
}
.flex-direction-row-reverse {
    flex-direction: row-reverse!important;
}
.flex-direction-column-reverse {
    flex-direction: column-reverse!important;
}

/* Align Content */
.align-content-normal {
    align-content: normal!important;
}
.align-content-center{
    align-content: center!important;
}
.align-content-flex-start {
    align-content: flex-start!important;
}
.align-content-flex-end{
   align-content: flex-end!important;
}
.align-content-space-around {
   align-content: space-around!important;
}
.align-content-space-between {
   align-content: space-between!important;
}
.align-content-stretch{
   align-content: stretch!important;
}

/* Justify Content*/
.justify-content-normal{
    justify-content: normal!important;
}
.justify-content-center {
    justify-content: center!important;
}
.justify-content-flex-start {
    justify-content: flex-start!important;
}
.justify-content-flex-end {
    justify-content: flex-end!important;
}
.justify-content-space-between {
    justify-content: space-between!important;
}
.justify-content-space-around {
    justify-content: space-around!important;
}
.justify-content-space-evenly {
    justify-content: space-evenly!important;
}

/* Align Items*/
.align-items-normal{
    align-items: normal!important;
} 
.align-items-center{
    align-items: center!important;
} 
.align-items-flex-start{
    align-items: flex-start!important;
} 
.align-items-flex-end{
    align-items: flex-end!important;
} 
.align-items-stretch{
    align-items: stretch!important;
} 
.align-items-baseline{
    align-items: baseline!important;
} 

/* Tooltip / Popover Components With Add Body Overlay Backgraound */
.popover{
    max-width: 350px;
    box-shadow: 0px 0px 1000px 1000px rgba(0, 0, 0, 0.3);
    z-index: 9999;
 }

/*Google Login Button*/
.vs-google-login-button{
    height: 2.5rem;
    padding: 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    color: #4280ef;
    background-color: var(--vs-white-background-color);
    border-radius: var(--vs-border-radius);
    border-color: var(--vs-form-element-text-input-border-color);
    border-width: 0.063rem;
    border-style: solid;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.vs-google-login-button img.vs-google-logo {
    float: var(--vs-float-left);
    width: 1.2rem; 
    padding: 0rem;
    margin: 0rem;
}

/*Buttons*/
/*Primary Button*/
.vs-primary-button {
    height: 2.5rem;
    padding: 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-primary-button-font-color);
    background-color: var(--vs-primary-color);
    border-radius: var(--vs-border-radius);
    border: 0rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.vs-primary-button img.vs-botton-icon {
    float: var(--vs-float-left);
    width: 1.2rem; 
    padding: 0rem;
    margin: 0rem;
}
.vs-primary-button img.vs-botton-icon-left {
    float: var(--vs-float-left);
    width: 1.2rem; 
    padding: 0rem;
    margin: 0 0.5rem 0 0;
}
.vs-primary-button img.vs-botton-icon-right {
    float: var(--vs-float-right);
    width: 1.2rem; 
    padding: 0rem;
    margin: 0 0 0 0.5rem;
}
.vs-primary-button:hover {
    background-color: var(--vs-primary-color);
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-primary-button-hover-font-color);
    cursor: pointer;
}
.vs-primary-button:focus {
    box-shadow: var(--vs-button-box-shadow);
    background-color: var(--vs-primary-dark-color);
    color: var(--vs-primary-button-hover-font-color);
}
.vs-primary-button[disabled] {
    background-color: var(--vs-primary-button-disabled-background-color);
    color: var(--vs-primary-button-disabled-font-color);
    cursor: not-allowed!important;
}
.vs-primary-button[disabled] img.vs-botton-icon-left {
    filter: invert(50%) sepia(50%) saturate(100%) hue-rotate(216deg) brightness(100%) contrast(100%);
    cursor: not-allowed!important;
}

/*Primary Components Action Button*/
.vs-primary-components-action-button {
    padding: 0.375rem 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-primary-button-font-color);
    background-color: var(--vs-primary-color);
    border-radius: var(--vs-border-radius);
    border: 0rem;
}
.vs-primary-components-action-button img.vs-components-action-button-icon {
    width: 0.5rem;
    height: 1rem;
    padding: 0rem;
    margin: 0rem;
}
.vs-primary-components-action-button:hover {
    background-color: var(--vs-primary-dark-color);
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-primary-button-hover-font-color);
    cursor: pointer;
}
.vs-primary-components-action-button:focus {
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-primary-button-hover-font-color);
}
.vs-primary-components-action-button[disabled] {
    background-color: var(--vs-primary-button-disabled-background-color);
    color: var(--vs-primary-button-disabled-font-color);
    cursor: not-allowed!important;
}

/*Secondary Button*/
.vs-secondary-button {
    height: 2.5rem;
    padding: 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-secondary-button-font-color);
    background-color: var(--vs-transparent-background-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid var(--vs-primary-color);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/*.vs-secondary-button img{filter: invert(26%) sepia(92%) saturate(2265%) hue-rotate(220deg) brightness(95%) contrast(112%)!important;}*/

.vs-secondary-button img.vs-botton-icon {
    float: var(--vs-float-left);
    width: 1.2rem;
    padding: 0rem;
    margin: 0rem;
}

.vs-secondary-button img.vs-botton-icon-left {
    float: var(--vs-float-left);
    width: 1.2rem;
    padding: 0rem;
    margin: 0 0.5rem 0 0;
}
.vs-secondary-button img.vs-botton-icon-right {
    float: var(--vs-float-right);
    width: 1.2rem;
    padding: 0rem;
    margin: 0 0 0 0.5rem;
}
.vs-secondary-button:hover {
    background-color: var(--vs-secondary-button-hover-background-color);
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-secondary-button-hover-font-color);    
    border: 0.125rem solid var(--vs-primary-color);
    cursor: pointer;
}
.vs-secondary-button:focus {
    box-shadow: var(--vs-button-box-shadow);
    background: var(--vs-primary-light-color);
    color: var(--vs-secondary-button-hover-font-color);   
    border: 0.063rem solid var(--vs-primary-color);
}
.vs-secondary-button[disabled] {
    background-color: var(--vs-secondary-button-disabled-background-color);
    color: var(--vs-secondary-button-disabled-font-color);
    border: 0.063rem solid var(--vs-secondary-button-disabled-border-color);
    cursor: not-allowed!important;
}
.vs-secondary-button[disabled] img.vs-botton-icon-left {
    filter: invert(50%) sepia(50%) saturate(100%) hue-rotate(216deg) brightness(100%) contrast(100%);
    cursor: not-allowed!important;
}


/*Secondary Components Action Button*/
.vs-scondary-components-action-button {
    padding: 0.375rem 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-secondary-button-font-color);
    background-color: var(--vs-transparent-background-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid var(--vs-primary-color);
}
.vs-scondary-components-action-button img.vs-components-action-button-icon {
    width: 0.5rem;
    height: 1rem;
    padding: 0rem;
    margin: 0rem;
}

/*.vs-scondary-components-action-button img.vs-components-action-button-icon{filter: invert(26%) sepia(92%) saturate(2265%) hue-rotate(220deg) brightness(95%) contrast(112%)!important;}*/

.vs-scondary-components-action-button:hover  {
    background-color: var(--vs-secondary-button-hover-background-color);
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-secondary-button-hover-font-color);    
    border: 0.063rem solid var(--vs-primary-color);
    cursor: pointer;
}
.vs-scondary-components-action-button:focus {
    box-shadow: var(--vs-button-box-shadow);
    background: var(--vs-secondary-button-hover-background-color);
    color: var(--vs-secondary-button-hover-font-color);   
    border: 0.063rem solid var(--vs-primary-color);
}
 
.vs-scondary-components-action-button[disabled] {
    background-color: var(--vs-secondary-button-disabled-background-color);
    color: var(--vs-secondary-button-disabled-font-color);
    border: 0.063rem solid var(--vs-secondary-button-disabled-border-color);
    cursor: not-allowed!important;
}

/*Tertiary Button*/
.vs-tertiary-button {
    height: 2.5rem;
    padding: 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-tertiary-button-font-color);
    background-color: var(--vs-transparent-background-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid var(--vs-tertiary-border-color);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.vs-tertiary-button img.vs-botton-icon {
    float: var(--vs-float-left);
    width: 1.2rem;
    padding: 0rem;
    margin: 0rem;
}
.vs-tertiary-button img.vs-botton-icon-left {
    float: var(--vs-float-left);
    width: 1.2rem;
    padding: 0rem;
    margin: 0 0.5rem 0 0;
}
.vs-tertiary-button img.vs-botton-icon-right {
    float: var(--vs-float-right);
    width: 1.2rem;
    padding: 0rem;
    margin: 0 0 0 0.5rem;
}
.vs-tertiary-button:hover {
    background-color: var(--vs-tertiary-button-hover-background-color); 
    color: var(--vs-tertiary-button-hover-font-color);
    cursor: pointer;
}
.vs-tertiary-button:focus {
    background-color: var(--vs-tertiary-button-hover-background-color);
    box-shadow: var(--vs-button-box-shadow);
}

/*Tertiary Components Action Button*/
.vs-tertiary-components-action-button {
    padding: 0.375rem 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-tertiary-button-font-color);
    background-color: var(--vs-tertiary-button-background-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid var(--vs-tertiary-border-color);
}
.vs-tertiary-components-action-button img.vs-components-action-button-icon {
    width: 0.5rem;
    height: 1rem;
    padding: 0rem;
    margin: 0rem;
}
.vs-tertiary-components-action-button:hover {
    background-color: var(--vs-tertiary-button-hover-background-color);
    box-shadow: var(--vs-button-box-shadow);
    color: var(--vs-tertiary-button-hover-font-color);
    cursor: pointer;
}
.vs-tertiary-components-action-button:focus {
    box-shadow: var(--vs-button-box-shadow);
} 


/* Forms Container */
.vs-form-element-container {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.form-group{
    margin-bottom: 2rem!important;
}
/* Forms Labels */
.vs-form-element-label {
    /*float: var(--vs-float-left);
    width: 100%;*/
    font-weight: var(--vs-font-weight-600);
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-15);
    font-family: var(--vs-font-family);
    color: var(--vs-primary-second-font-color);
    margin: 0 0 0.25rem 0;
    padding: 0rem;
}

.vs-label-help-text { 
    font-weight: var(--vs-font-weight-400);
    font-size: var(--vs-font-size-12);
    line-height:  var(--vs-font-line-height-12);
    font-family: var(--vs-font-family);
    color: var(--vs-regular-font-color);
    margin: 0;
    padding: 0rem;
}


.vs-label-help-icon {
    padding: 0rem;
    margin: 0rem;
    position: var(--vs-position-relative);
}
.vs-label-help-icon-img {
    float: var(--vs-float-left);
    width: 1.375rem;
    height: 1.375rem;
    padding: 0rem;
    margin: 0 0.313rem 0 0;
    position: var(--vs-position-relative);
}
.vs-label-help-icon-count {
    float: left;
    margin: 0rem;
    padding: 0.125rem 0.25rem;
    background: var(--vs-label-help-icon-count-background-color);
    position: var(--vs-position-absolute);
    top: -0.125rem;
    right: 0rem;
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-weight: var(--vs-font-weight-300);
    color: var(--vs-white-font-color);
    border-radius: 0.125rem;
}

.vs-label-primary-help-count { 
    margin: 0rem;
    padding: 0.313rem 0.625rem;
    background: var(--vs-label-help-count-light-color-background-color); 
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-primary-font-color);
    border-radius: 100%;
}

/* Forms Labels Required Asterisk*/
.vs-form-element-required-asterisk {
    color: #CA262F;
    font-size: var(--vs-font-size-18);
    display: inline-block;
    line-height: var(--vs-font-line-height-10);
    font-weight: var(--vs-font-weight-100);
    /*position: var(--vs-position-absolute);
    top: 0.625rem;*/
}
/* Forms Labels Required Asterisk*/

.vs-form-element-required-error-massage {
    color: #CA262F;
    font-weight: var(--vs-font-weight-600);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-style: italic;
}

/* Forms Text Inputs Components */
.vs-form-element-text-input {
    width: 100%;
    height: 2.5rem;
    background: var(--vs-form-element-text-input-background-color);
    border-radius: var(--vs-border-radius);
    border-color: var(--vs-form-element-text-input-border-color);
    border-width: 0.063rem;
    border-style: solid;
    padding: 0.375rem 1.875rem 0.375rem 0.75rem;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
}
.vs-form-element-text-input::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    color: var(--vs-regular-font-color);
}
.vs-form-element-text-input:hover {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-hover-border-color);
}
.vs-form-element-text-input:focus {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-focus-border-color);
    box-shadow: var(--vs-form-element-text-input-focus-box-shadow);
    z-index: unset!important;
}
.vs-form-element-text-input[readonly] {
    background: var(--vs-form-element-text-input-readonly-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
}
.vs-form-element-text-input[disabled] {
    background: var(--vs-form-element-text-input-disabled-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
    cursor: not-allowed!important;
}

.vs-form-element-text-input-left-icon .vs-form-element-text-input{
    padding: 0.375rem 1.875rem 0.375rem 2rem;
    border-radius: var(--vs-border-radius)!important;
    background-color: transparent!important;
}

.vs-form-element-text-input-left-icon .vs-form-element-text-input.text-input-no-clearable{
    padding: 0.375rem 1.875rem 0.375rem 2rem!important;
    border-radius: var(--vs-border-radius)!important;
    background-color: transparent!important;
}
.vs-form-element-text-input-left-icon .vs-text-input-left-icon{
    position: var(--vs-position-absolute);
    top: 0.75rem;
    left: 0.75rem;     
}

.vs-form-element-text-input-right-icon .vs-form-element-text-input{
    padding: 0.375rem 1.875rem 0.375rem 0.75rem;
    border-radius: var(--vs-border-radius)!important;
    background-color: transparent!important;
}
.vs-form-element-text-input-right-icon .vs-text-input-right-icon{
    position: var(--vs-position-absolute);
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;    
}
 

/*Date Picker*/

.daterangepicker .prev.available, .next.available {
    background: inherit!important;
    padding: 0.625rem 0!important;
}
.daterangepicker th.month {
    width: auto;
    padding: 0.625rem 0!important;
}
.daterangepicker select.monthselect {
    width: 56%;
    margin-right: 4%;
    border: 0.063rem solid var(--vs-form-element-text-input-border-color);
    line-height: var(--vs-font-line-height-18);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    padding: 0.313rem 0.625rem;
    border-radius: var(--vs-border-radius);
}
.daterangepicker select.yearselect {
    width: 40%;
    border: 0.063rem solid var(--vs-form-element-text-input-border-color);
    line-height: var(--vs-font-line-height-18);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    padding: 0.313rem 0.625rem;
    border-radius: var(--vs-border-radius);
}
.daterangepicker select.hourselect {
    border: 0.063rem solid var(--vs-form-element-text-input-border-color);
    line-height: var(--vs-font-line-height-18);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    padding: 0.313rem 0.625rem;
    border-radius: var(--vs-border-radius);
}
.daterangepicker select.minuteselect {
    border: 0.063rem solid var(--vs-form-element-text-input-border-color);
    line-height: var(--vs-font-line-height-18);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    padding: 0.313rem 0.625rem;
    border-radius: var(--vs-border-radius);
}
.daterangepicker select.ampmselect {
    border: 0.063rem solid var(--vs-form-element-text-input-border-color);
    line-height: var(--vs-font-line-height-18);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    padding: 0.313rem 0.625rem;
    border-radius: var(--vs-border-radius);
}
.daterangepicker .calendar-table th {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-16);
    font-weight: var(--vs-font-weight-600);
    color: var(--vs-primary-second-font-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid transparent;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.625rem;
}
.daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height:  var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    white-space: nowrap;
    cursor: pointer;
    padding: 0.625rem;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--vs-primary-color);
    color: var(--vs-primary-button-font-color);
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: var(--vs-transparent-background-color);
    color: var(--vs-secondary-button-font-color);
    border-radius: var(--vs-border-radius);
}
.vs-form-element-text-input.vs-form-element-date-picker {
    background: var(--vs-form-element-text-input-background-color) url(../images/icons/calendar.svg) no-repeat 99%;
    background-size: 0.938rem;
}
.vs-form-element-text-input.vs-form-element-date-picker[disabled] {
    background: var(--vs-form-element-text-input-disabled-background-color) url(../images/icons/calendar.svg) no-repeat 98%!important;
    background-size: 0.938rem!important;
}
.vs-form-element-text-input.vs-form-element-date-picker[readonly] {
    background: var(--vs-form-element-text-input-disabled-background-color) url(../images/icons/calendar.svg) no-repeat 98%!important;
    background-size: 0.938rem!important;
}
.daterangepicker .drp-buttons .btn {
    padding: 0.625rem 1.25rem!important;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    line-height:  var(--vs-font-line-height-15)!important;
    text-shadow: inherit!important;
    border: 0rem!important;
    letter-spacing: inherit!important;
    box-shadow: inherit!important;
    text-transform: inherit!important;
    border-radius: var(--vs-border-radius)!important;
}
.daterangepicker .drp-buttons .applyBtn.btn-primary {
    background: var(--vs-primary-color);
    color: var(--vs-primary-button-font-color);
    border: 0.063rem solid var(--vs-primary-color)!important;
    margin: 0 0 0 1.25rem!important;
}
.daterangepicker .drp-buttons .applyBtn.btn-primary:hover {
    background-color: var(--vs-primary-dark-color)!important;
    box-shadow: var(--vs-button-box-shadow)!important;
}
.daterangepicker .drp-buttons .cancelBtn.btn-default {
    background: var(--vs-transparent-background-color)!important;
    border: 0.063rem solid var(--vs-primary-color)!important;
    color: var(--vs-secondary-button-font-color)!important;
}
.daterangepicker .drp-buttons .cancelBtn.btn-default:hover {
    background-color: var(--vs-secondary-button-hover-background-color)!important;
    box-shadow: var(--vs-button-box-shadow)!important;
}
.daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.daterangepicker .ranges li {
    padding: 0.625rem 1.25rem!important;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    cursor: pointer;
}
.daterangepicker .ranges li:hover {
    background: var(--vs-transparent-background-color);
    color: var(--vs-secondary-button-font-color);
}
.daterangepicker .ranges li.active {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    background: var(--vs-primary-color);
    color: var(--vs-primary-button-font-color);
}
.daterangepicker .drp-selected {
    margin: 0 1.25rem 0 0;
    display: inline-block;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
}
.daterangepicker {
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 0px 0px rgba(0, 0, 0, 0.12);
}
.vs-form-element-text-input.vs-form-element-date-picker:hover {
    background: var(--vs-form-element-text-input-background-color) url(../images/icons/close-icon-dark-gray.svg) no-repeat right 0.625rem center;
}
.vs-form-element-text-input {
    background: #fff url(../images/icons/close-icon-dark-gray.svg) no-repeat right -0.8rem center;
}

.text-input-no-clearable{
    background: none!important;
    background-position:inherit!important;
    padding: 0.375rem 0.313rem 0.375rem 0.313rem!important;
}
.text-input-clearable.text-input-no-clearable.onX{
    cursor: inherit!important;
}

.vs-form-element-text-input.text-input-clearable {
    background-position: right 0.8rem center;
}
/*.vs-form-element-text-input.text-input-clearable[type="password"] {
    background-position: right 2.5rem center!important;
}*/

/* (jQ) Show icon */

.vs-form-element-text-input.onX {
    cursor: pointer;
}
/* (jQ) hover cursor style */

.vs-form-element-text-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
/* Remove IE default X */

/*Form Element Required*/

.vs-form-element-required {
    border-color: var(--vs-form-element-required-border-color);
    border-width: 0.063rem;
    border-style: solid;
    color: var(--vs-form-element-required-font-color);
    background: url(../images/icons/warning-red-icon.svg) no-repeat 98%!important;
}
.vs-form-element-required::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    color: var(--vs-form-element-required-placeholder-font-color);
}
.vs-form-element-required:hover {
    border-color: var(--vs-form-element-required-hover-border-color);
}
.vs-form-element-required:focus {
    border-color: var(--vs-form-element-required-focus-border-color);
}
/* Forms Textarea Components */

.vs-form-element-textarea {
    width: 100%;
    /*  height: 2.5rem;*/
    /*  background: var(--vs-form-element-textarea-background-color);*/
    border-radius: var(--vs-border-radius);
    border-color: var(--vs-form-element-textarea-border-color);
    border-width: 0.063rem;
    border-style: solid;
    padding: 0.375rem 1.875rem 0.375rem 0.75rem;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-form-element-textarea-font-color);
}
.vs-form-element-textarea::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-style: italic;
    color: var(--vs-form-element-textarea-placeholder-font-color);
}
.vs-form-element-textarea:hover {
    /*  background: var(--vs-form-element-textarea-background-color);*/
    border-color: var(--vs-form-element-textarea-hover-border-color);
}
.vs-form-element-textarea:focus {
    /*  background: var(--vs-form-element-textarea-background-color);*/
    border-color: var(--vs-form-element-textarea-focus-border-color);
    box-shadow: var(--vs-form-element-textarea-focus-box-shadow);
}
.vs-form-element-textarea[readonly] {
    background: var(--vs-form-element-textarea-readonly-background-color)!important;
    color: var(--vs-form-element-textarea-font-color)!important;
}
.vs-form-element-textarea[disabled] {
    background: var(--vs-form-element-textarea-disabled-background-color)!important;
    color: var(--vs-form-element-textarea-font-color)!important;
    cursor: not-allowed!important;
}
.vs-form-element-textarea {
    background: #fff url(../images/icons/close-icon-dark-gray.svg) no-repeat right -0.625rem center;
}
.vs-form-element-textarea.text-input-clearable {
    background-position: right 0.625rem center;
}
/* (jQ) Show icon */

.vs-form-element-textarea.onX {
    cursor: pointer;
}
/* (jQ) hover cursor style */

.vs-form-element-textarea::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
/* Remove IE default X */

/* Forms Select Inputs Dropdown Components */

.vs-form-element-select-input-dropdown {
    width: 100%!important;
    border: 0rem!important;
    padding: 0rem;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    color: var(--vs-secondary-font-color)!important;
    background: var(--vs-form-element-select-input-dropdown-background-color)!important;
}
.vs-form-element-select-input-dropdown .btn.dropdown-toggle.btn-default.btn-light {
    width: 100%!important;
    height: 2.5rem!important;
    box-shadow: inherit!important;
    border-radius: var(--vs-border-radius)!important;
    border: 0.063rem solid var(--vs-form-element-select-input-dropdown-border-color)!important;
    padding: 0.375rem 1.875rem 0.375rem 0.75rem!important;
    margin: 0rem!important;
    letter-spacing: inherit!important;
    background: var(--vs-transparent-background-color)!important;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    line-height:  var(--vs-font-line-height-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    color: var(--vs-secondary-font-color)!important;
    text-transform: inherit!important;
    text-shadow: inherit!important;
    z-index: inherit!important;
}
.vs-form-element-select-input-dropdown .btn.dropdown-toggle.btn-default.btn-light:hover {
    background: var(--vs-form-element-select-input-dropdown-background-color)!important;
    border-color: var(--vs-form-element-select-input-dropdown-hover-border-color)!important;
}
.vs-form-element-select-input-dropdown .btn.dropdown-toggle.btn-default.btn-light:focus {
    background: var(--vs-form-element-select-input-dropdown-background-color)!important;
    border-color: var(--vs-form-element-select-input-dropdown-focus-border-color)!important;
    box-shadow: var(--vs-form-element-select-input-dropdown-focus-box-shadow)!important;
}
.vs-form-element-select-input-dropdown .btn.dropdown-toggle.btn-default.btn-light.disabled {
    background: var(--vs-form-element-select-input-dropdown-disabled-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
    cursor: not-allowed!important;
}
.vs-form-element-select-input-dropdown.set-readonly {
    background: var(--vs-form-element-select-input-dropdown-disabled-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
    cursor: not-allowed!important;
    pointer-events: none;    
    border-radius: var(--vs-border-radius)!important;
}
.vs-form-element-select-input-dropdown::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-style: italic;
    color: var(--vs-regular-font-color);
}
.vs-form-element-select-input-dropdown.bootstrap-select.btn-group .dropdown-menu {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    border: 0.063rem solid var(--vs-form-element-select-input-dropdown-border-color);
    box-shadow: var(--vs-form-element-select-input-dropdown-box-shadow);
    border-radius: var(--vs-border-radius);
    transform: inherit!important;
}
.vs-form-element-select-input-dropdown.bootstrap-select.btn-group .dropdown-menu .inner {
    border: 0rem;
    max-height: 200px!important;
}
.vs-form-element-select-input-dropdown.bootstrap-select.btn-group .dropdown-menu a.dropdown-item {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    text-transform: inherit!important;
    border: 0rem;
    padding: 0.625rem;
}
.vs-form-element-select-input-dropdown.bootstrap-select.btn-group .dropdown-menu a.dropdown-item.active {
    background: var(--vs-primary-color)!important;
    color: var(--vs-white-font-color)!important;
}
.vs-form-element-select-input-dropdown.bootstrap-select.btn-group .dropdown-menu a.dropdown-item:active {
    background: var(--vs-primary-color)!important;
    color: var(--vs-white-font-color)!important;
}
/* Forms Multi Select Components */

.vs-form-element-multi-select {
    width: 100%!important;
    border: 0rem!important;
   padding: 0rem;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    color: var(--vs-secondary-font-color)!important;
    background: var(--vs-form-element-multi-select-background-color)!important;
}
.vs-form-element-multi-select.chosen-container-multi .chosen-choices {
    width: 100%!important;
    height: 2.5rem!important;
    box-shadow: inherit!important;
    border-radius: var(--vs-border-radius)!important;
    border: 0.063rem solid var(--vs-form-element-multi-select-border-color)!important;
    padding: 0.375rem!important;
    margin: 0rem!important;
    letter-spacing: inherit!important;
    background: var(--vs-transparent-background-color)!important;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    line-height: var(--vs-font-line-height-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    color: var(--vs-secondary-font-color)!important;
    text-transform: inherit!important;
    text-shadow: inherit!important;
    overflow-y: auto;
}

.vs-form-element-multi-select.vs-multi-select-regular .chosen-container-multi .chosen-choices{
    height: 2.5rem!important;
}

.vs-form-element-multi-select.chosen-container-multi .chosen-choices:hover {
    background: var(--vs-form-element-multi-select-background-color)!important;
    border-color: var(--vs-form-element-multi-select-hover-border-color)!important;
}
.vs-form-element-multi-select.chosen-container-multi .chosen-choices:focus {
    background: var(--vs-form-element-multi-select-background-color)!important;
    border-color: var(--vs-form-element-multi-select-focus-border-color)!important;
    box-shadow: var(--vs-form-element-multi-select-focus-box-shadow)!important;
}
.vs-form-element-multi-select.chosen-container-multi .chosen-choices .search-field input[type=text] {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-style: italic;
    color: var(--vs-regular-font-color);
}
.vs-form-element-multi-select.chosen-container-multi.chosen-disabled .chosen-choices {
    background: var(--vs-form-element-text-input-disabled-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
    cursor: not-allowed!important;
    opacity: inherit!important;
}
.vs-form-element-multi-select.chosen-container-multi .chosen-choices .search-choice {
    padding: 0.25rem 1.25rem 0.25rem 0.5rem;
    border-radius: var(--vs-border-radius)!important;
    border: 0.063rem solid var(--vs-form-element-multi-select-choice-tag-border);
    background: var(--vs-form-element-multi-select-choice-tag-background)!important;
    font-family: var(--vs-font-family)!important;
    font-size: var(--vs-font-size-15)!important;
    line-height: var(--vs-font-line-height-15)!important;
    font-weight: var(--vs-font-weight-400)!important;
    color: var(--vs-secondary-font-color)!important;
}
.vs-form-element-multi-select.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    display: inline-block;
    position: var(--vs-position-absolute);
    top: 0.438rem;
    right: 0.313rem;
    width: 0.625rem;
    height: 0.625rem;
    cursor: pointer;
    background-image: url(../images/icons/close-icon-dark-gray.svg);
    background-size: 0.625rem 0.625rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.vs-form-element-multi-select.chosen-container-multi.chosen-container .chosen-drop {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    border: 0.063rem solid var(--vs-form-element-select-input-dropdown-border-color);
    box-shadow: var(--vs-form-element-select-input-dropdown-box-shadow);
    border-radius: var(--vs-border-radius);
    background: var(--vs-form-element-multi-select-background-color);
}
.vs-form-element-multi-select.chosen-container-multi.chosen-container .chosen-drop .chosen-results {
   padding: 0rem;
}
.vs-form-element-multi-select.chosen-container-multi.chosen-container .chosen-drop .chosen-results li.active-result {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    text-transform: inherit!important;
    border: 0rem;
    padding: 0.625rem;
}
.vs-form-element-multi-select.chosen-container-multi.chosen-container .chosen-drop .chosen-results li.active-result.highlighted {
    background: var(--vs-primary-color)!important;
    color: var(--vs-white-font-color)!important;
}

/* Forms File Upload Components */
.vs-form-element-file-upload {
    position: var(--vs-position-relative);
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding: 0.375rem 0.625rem 0.375rem 0.313rem;
    background-color: var(--vs-form-element-file-upload-background-color);
    border-radius: var(--vs-border-radius);
    border: 0.063rem solid var(--vs-form-element-file-upload-border-color); 
    color: var(--vs-secondary-font-color)!important;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
} 

input[type=file].vs-form-element-file-upload::file-selector-button { 
  width: 7.5rem; 
  margin: 0 1rem 0 0;
  border: none;
  background:  url(../images/icons/select-file-btn.svg) no-repeat;
  background-size: 100%;
  cursor: pointer;   
  color: rgba(0, 0, 0, 0); 
}

.vs-form-element-file-upload::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    color: var(--vs-regular-font-color);
}
.vs-form-element-file-upload:hover {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-hover-border-color);
}
.vs-form-element-file-upload:focus {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-focus-border-color);
    box-shadow: var(--vs-form-element-text-input-focus-box-shadow);
    z-index: unset!important;
}
.vs-form-element-file-upload[readonly] {
    background: var(--vs-form-element-text-input-readonly-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
}
.vs-form-element-file-upload[disabled] {
    background: var(--vs-form-element-text-input-disabled-background-color)!important;
    color: var(--vs-secondary-font-color)!important;
    cursor: not-allowed!important;
}
.vs-form-element-file-upload {
    background: #fff url(../images/icons/close-icon-dark-gray.svg) no-repeat right -0.625rem center;
}
.vs-form-element-file-upload.text-input-clearable {
    background-position: right 0.625rem center;
}
/* (jQ) Show icon */

.vs-form-element-file-upload.onX {
    cursor: pointer;
}
/* (jQ) hover cursor style */

.vs-form-element-file-upload::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
/* Remove IE default X */
 
/* Checkbox Components */
/* Checkbox Components */

.vs-form-element-checkbox-custom {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--vs-transparent-background-color);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.063rem solid var(--vs-form-element-checkbox-border-color);
    border-radius: var(--vs-border-radius);
    transform: translateY(0.3rem);
    display: inline-grid;
    place-content: center;
}
.vs-form-element-checkbox-custom::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icons/checkbox-tick.svg) no-repeat center center;
    transform: scale(0);
    border-radius: var(--vs-border-radius);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    background-color: var(--vs-primary-color);
}
.vs-form-element-checkbox-custom:checked::before {
    transform: scale(1);
}
.vs-form-element-checkbox-custom:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}
.vs-form-element-checkbox-custom:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vs-form-element-checkbox { 
    position: var(--vs-position-relative);
    display: block;
}
.vs-form-element-checkbox input {
    opacity: 0;
    position: var(--vs-position-absolute);
    top: 0rem;
    left: 0rem;
    z-index: 1;
    cursor: pointer;
    width: 1.375rem;
    height: 1.563rem;
    margin: 0rem;
   padding: 0rem;
    cursor: pointer; 
    font-family: var(--vs-font-family);
} 
.vs-form-element-checkbox input:checked+label::after {
    content: '';
    display: inline-block;
    position: var(--vs-position-absolute);
    width: 1.375rem;
    height: 1.563rem;
    left: 0;
    top: 0.125rem; 
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--vs-form-element-checkbox-border-color);
    border-radius: var(--vs-border-radius);
    background-color: var(--vs-form-element-checkbox-background-color);
}
.vs-form-element-checkbox label {
    display: inline-block;
    position: var(--vs-position-relative);
    padding-left: 1.875rem;
    padding-top: 0.4rem
}
.vs-form-element-checkbox label::before {
    content: '';
    display: inline-block;
    position: var(--vs-position-absolute);
    width: 1.375rem;
    height: 1.375rem;
    left: 0;
    top: 0.125rem; 
    border-width: 0.063rem;
    border-style: solid;
    border-color: var(--vs-form-element-checkbox-border-color);
    border-radius: var(--vs-border-radius);
    background-color: var(--vs-form-element-checkbox-background-color);
}
.vs-form-element-checkbox.disabled label::before {
    opacity: 1;
    border-color: var(--vs-form-element-checkbox-border-color);
    cursor: not-allowed!important;
}
.vs-form-element-checkbox input:checked+label::before {
    border-color: var(--vs-primary-color);
    background-color: var(--vs-primary-color);
}
.vs-form-element-checkbox input:indeterminate + label::before {
    content: "-";
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-primary-color);
    background-color: transparent;
    border: 2px solid var(--vs-primary-color);
    width: 1.375rem;
    height: 1.375rem;
    font-size: 16px;
    line-height: 16px;
}
.vs-form-element-checkbox input:checked+label::after {
    content: "";
    background: url(../images/icons/checkbox-tick.svg) no-repeat center center;
    top: 0rem;
    left: 0rem;
    background-size: 100%;
    border-color: transparent;
    background-color: transparent;
}
.vs-form-element-checkbox label::before {
    border-radius: var(--vs-border-radius);
}
.vs-form-element-checkbox label:hover::before {
    border-color: var(--vs-form-element-checkbox-hover-border-color);
    box-shadow: var(--vs-form-element-checkbox-box-shadow);
}
/* Radio Buttons */

.vs-form-element-radio-button {
    width: 100%;
    display: flex
}
.vs-form-element-radio-button-btn {
    position: var(--vs-position-relative);
    flex: 1 0;
    height: 100%;
    text-align: center;
    background: var(--vs-form-element-segmented-background-color);
}
.vs-form-element-radio-button-btn:last-of-type input+label {
    border-left: 0
}
.vs-form-element-radio-button-btn:first-of-type input+label {
    border-right: 0
}
.vs-form-element-radio-button input {
    position: var(--vs-position-absolute);
    opacity: 0
}
.vs-form-element-radio-button input+label {
    position: var(--vs-position-relative);
    z-index: 1;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.438rem 0;
    margin: 0;
    color: #767676;
    cursor: pointer;
    transition: .3s ease
}
.vs-form-element-radio-button input+label::before {
    position: var(--vs-position-absolute);
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    transition: .3s ease
}
.vs-form-element-radio-button input[type=radio]:checked+label {
    color: var(--vs-primary-color);
}
.vs-form-element-radio-button input[type=radio]:checked+label::before {
    background: var(--vs-form-element-segmented-checked-background-color);
    box-shadow: var(--vs-form-element-segmented-checked-box-shadow);
    transition-delay: .1s
}
.vs-form-element-radio-button.vs-radio-button-fade input+label::before {
    opacity: 0
}
.vs-form-element-radio-button.vs-radio-button-fade [type=radio]:checked+label::before {
    opacity: 1
}
.vs-form-element-radio-button.vs-radio-button-slide input+label::before {
    top: 50%;
    height: 0;
    opacity: 0;
    transform: translateY(-50%)
}
.vs-form-element-radio-button.vs-radio-button-slide [type=radio]:checked+label::before {
    height: 100%;
    opacity: 1
}
.vs-form-element-radio-button.vs-radio-button-zoom input+label::before {
    transform: scale(0)
}
.vs-form-element-radio-button.vs-radio-button-zoom [type=radio]:checked+label::before {
    transform: scale(1)
}
.vs-radio-button-rounded.vs-form-element-radio-button .vs-form-element-radio-button-btn {
    padding: 0.313rem;
}
.vs-radio-button-rounded.vs-form-element-radio-button .vs-form-element-radio-button-btn:last-of-type {
    border-radius: 0 var(--vs-border-radius) var(--vs-border-radius) 0;
}
.vs-radio-button-rounded.vs-form-element-radio-button .vs-form-element-radio-button-btn:first-of-type {
    border-radius: var(--vs-border-radius) 0 0 var(--vs-border-radius);
}
.vs-radio-button-rounded.vs-form-element-radio-button input {
    position: var(--vs-position-absolute);
    opacity: 0
}
.vs-radio-button-rounded.vs-form-element-radio-button input[type=radio]:checked+label::before {
    border-radius: var(--vs-border-radius);
}
/*Segmented Control*/

.vs-segmented-control {
    width: 100%;
    display: flex
}
.vs-segmented-control-btn {
    position: var(--vs-position-relative);
    flex: 1 0;
    height: 100%;
    text-align: center;
    background: var(--vs-form-element-segmented-background-color);
}
.vs-segmented-control-btn:last-of-type input+label {
    border-left: 0
}
.vs-segmented-control-btn:first-of-type input+label {
    border-right: 0
}
.vs-segmented-control input {
    position: var(--vs-position-absolute);
    opacity: 0
}
.vs-segmented-control input+label {
    position: var(--vs-position-relative);
    z-index: 1;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-500);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.438rem 0;
    margin: 0;
    color: #767676;
    cursor: pointer;
    transition: .3s ease; 
}

.vs-segmented-control-btn:after{
    content: '';
    position: var(--vs-position-absolute);
    top: 0.75rem;
    right: 0rem;
    width: 0.063rem;
    height: 0.938rem;
    background: #AEADAD;
    z-index: 1;
}

/*.vs-segmented-control-btn:first-child:after{
   display: none; 
} */

.vs-segmented-control-btn:last-child:after{
   display: none; 
} 
 
.vs-segmented-control input+label::before {
    position: var(--vs-position-absolute);
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    transition: .3s ease
}
.vs-segmented-control input[type=radio]:checked+label {
    color: var(--vs-primary-color);
    border-right: 0;
}
.vs-segmented-control input[type=radio]:checked+label::before {
    background: var(--vs-form-element-segmented-checked-background-color);
    box-shadow: var(--vs-form-element-segmented-checked-box-shadow);
    transition-delay: .1s
}
.vs-segmented-control.vs-sc-fade input+label::before {
    opacity: 0
}
.vs-segmented-control.vs-sc-fade [type=radio]:checked+label::before {
    opacity: 1
}
.vs-segmented-control.vs-sc-slide input+label::before {
    top: 50%;
    height: 0;
    opacity: 0;
    transform: translateY(-50%)
}
.vs-segmented-control.vs-sc-slide [type=radio]:checked+label::before {
    height: 100%;
    opacity: 1
}
.vs-segmented-control.vs-sc-zoom input+label::before {
    transform: scale(0)
}
.vs-segmented-control.vs-sc-zoom [type=radio]:checked+label::before {
    transform: scale(1)
}
.vs-sc-rounded.vs-segmented-control .vs-segmented-control-btn {
    padding: 0.313rem;
}
.vs-sc-rounded.vs-segmented-control .vs-segmented-control-btn:last-of-type {
    border-radius: 0 var(--vs-border-radius) var(--vs-border-radius) 0;
}
.vs-sc-rounded.vs-segmented-control .vs-segmented-control-btn:first-of-type {
    border-radius: var(--vs-border-radius) 0 0 var(--vs-border-radius)
}
.vs-sc-rounded.vs-segmented-control input {
    position: var(--vs-position-absolute);
    opacity: 0
}
.vs-sc-rounded.vs-segmented-control input[type=radio]:checked+label::before {
    border-radius: var(--vs-border-radius);
}
/* Navigation Menu Components */

.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
   padding: 0rem;
    background: var(--vs-white-background-color);
    box-shadow: var(--vs-navigation-menu-box-shadow);
    position: fixed;
    top: 0rem;
    bottom: auto;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    z-index: 1000;
    overflow: visible;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .vs-brand-logo {
    float: var(--vs-float-left);
    width: auto;
    margin: 0rem;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .vs-brand-logo img {
    float: left;
    height: 2.813rem;
    margin: 0.313rem 0.625rem 0.313rem 0;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list {
    float: var(--vs-float-left);
    margin: 0 0 0 1rem;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list {
    float: var(--vs-float-right);
    margin: 0rem;
   padding: 0rem;
} 
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list li:first-child a.vs-nav-icon{
    padding-left: 0rem!important;
}

.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li {
    float: var(--vs-float-left);
    margin: 0rem;
   padding: 0rem;
    position: var(--vs-position-relative);
    list-style: none;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a {
    float: var(--vs-float-left);
    margin: 0rem;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a span.text {
    float: var(--vs-float-left);
    margin: 0rem;
    /*padding: 1.25rem 0.938rem;*/
    padding: 1.25rem 0.6rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    line-height: var(--vs-font-line-height-15);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a:hover span.text {
    color: var(--vs-primary-color);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a.vs-active-nav span.text {
    color: var(--vs-primary-color);    
    font-weight: var(--vs-font-weight-500);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a.vs-active-nav span.text .arrow {
    color: var(--vs-primary-color);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a.vs-active-nav:before {
    content: '';
    width: 100%;
    height: 0.25rem;
    background: var(--vs-primary-color);
    position: var(--vs-position-absolute);
    top: 0rem;
    left: 0rem;
    border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a span.text .arrow {
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0 0 0 0.313rem;
   padding: 0rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-secondary-font-color);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li a:hover span.text .arrow {
    color: var(--vs-primary-color);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown {
    display: none;
    position: var(--vs-position-absolute);
    left: 0;
    top: 3.563rem;
    transition: opacity .5s ease, top .4s ease;
    background: var(--vs-white-background-color);
    box-shadow: inset 0px 3px 10px 0px rgba(171, 171, 171, 0.25);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown.vs-dropdown-right-open {
    display: none;
    position: var(--vs-position-absolute);
    right: 0.313rem;
    left: auto;
    top: 3.563rem;
    transition: opacity .5s ease, top .4s ease;
    background: var(--vs-white-background-color);
    box-shadow: inset 0px 3px 10px 0px rgba(171, 171, 171, 0.25);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li:hover .vs-navigation-menu-dropdown {
    display: block;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown .vs-navigation-menu-dropdown-container {
    float: var(--vs-float-left);
    min-width: 17.188rem;
    background-image: linear-gradient(#f9f9f9, #fff);
    box-shadow: 0px 5px 10px rgba(171, 171, 171, 0.25);
    border-radius: 0rem 0rem var(--vs-border-radius) var(--vs-border-radius);
    margin: 0.625rem 0 0 0;
    padding: 0 0 0.625rem 0;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown .vs-navigation-menu-dropdown-container li {
    float: var(--vs-float-left);
    width: 100%;
   padding: 0rem;
    margin: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown .vs-navigation-menu-dropdown-container li a {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.938rem 1.25rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
    line-height: var(--vs-font-line-height-15);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list li .vs-navigation-menu-dropdown .vs-navigation-menu-dropdown-container li a:hover {
    color: var(--vs-primary-color);
    text-decoration: none;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list {
    float: var(--vs-float-right)!important;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list li {
    float: var(--vs-float-left);
    margin: 0rem;
   padding: 0rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list li a.vs-nav-icon {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 1.125rem 0 1.125rem 1.563rem;
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list li a.vs-nav-icon img {
    float: var(--vs-float-left);
    width: 1.375rem;
    margin: 0rem;
   padding: 0rem;
    position: var(--vs-position-relative);
}
.app .main-container.nav-horizontal .nav-wrap.vs-navigation-menu-container .site-nav.vs-navigation-menu .nav-list.vs-nav-list.vs-nav-icon-list li a.vs-nav-icon .queryCount {
    float: left;
    width: 0.938rem;
    height: 0.938rem;
    background: red;
    margin: 0rem!important;
    top: 0.938rem;
    right: 0.313rem;
    border-radius: 50%;
    padding: 0rem!important;
    text-align: center;
    position: var(--vs-position-absolute);
    color: #fff;    
    font-size: var(--vs-font-size-10);
}
/* Footer Components */

.vs-footer {
    position: relative;
    float: var(--vs-float-left);
    width: 100%;
    min-height: 3.125rem; 
    margin: 0rem;
    padding: 1.125rem 1.25rem 0.938rem 1.25rem;
    /*position: var(--vs-position-absolute);
    bottom: 0rem;
    left: 0rem;*/
    background: var(--vs-white-background-color);
    box-shadow: var(--vs-footer-box-shadow);
    z-index: 999;
}
.vs-footer p.copyrights {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
   padding: 0rem;
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
}
.vs-footer p.powered-by {
    float: var(--vs-float-right);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    font-size: var(--vs-font-size-13);
    text-align: right;
    line-height: var(--vs-font-line-height-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
}

/*Page Card Components*/
.vs-page-card {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 2rem;
    background: var(--vs-page-card-background-color);
    border: 0rem;
    box-shadow: var(--vs-page-card-box-shadow);
    border-radius: var(--vs-border-radius);
} 
.vs-page-card-content {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    border: 0rem;
}

/*Card Heading Icon Type CSS*/
.vs-card-heading-icon-type {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0;
    padding:0;
}
.vs-card-heading-icon {
    float: var(--vs-float-left); 
    margin: 0rem;
    padding:0.375rem;
}

.vs-card-heading-icon img { 
    float: var(--vs-float-left); 
    width: 1.25rem;
    margin: 0rem;
    padding:0rem;
}

.vs-card-heading-icon.blue-bg{
    background: #E5EAFC;
    border-radius: 2px;
}

.vs-card-heading-icon.red-bg{
    background: #FAF0F1;
    border-radius: 2px;
}

.vs-card-heading-icon.purple-bg{
    background: #EFE4FC;
    border-radius: 2px;
}

.vs-card-heading-icon.green-bg{
    background: #E0EFEE;
    border-radius: 2px;
}

.vs-card-heading-icon.grey-bg{
    background: #EBEBEB;
    border-radius: 2px;
}


/*Card Font Styling CSS*/
.vs-card-heading {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0 0 1.875rem 0;
    padding:0 0 0.625rem 0;
}

.vs-card-heading h3 {
    float: var(--vs-float-left);
    position: var(--vs-position-relative);
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
}
.vs-card-heading h3:after {
    content: '';
    width: 40%;
    height: 0.188rem;
    background: var(--vs-primary-color);
    position: var(--vs-position-absolute);
    bottom: -0.625rem;
    left: 0rem;
    margin: 0rem;
    padding: 0rem;
}
.vs-card-sub-heading{  
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-24);
    line-height: var(--vs-font-line-height-24);
    font-weight: var(--vs-font-weight-600);
}

.vs-card-sub-heading-child {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-font-color);
    font-size: var(--vs-font-size-19);
    line-height: var(--vs-font-line-height-19);
    font-weight: var(--vs-font-weight-600);
}
.vs-card-title{  
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-19);
    line-height: var(--vs-font-line-height-19);
    font-weight: var(--vs-font-weight-500);
}
.vs-card-sub-title{  
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-15);
}
.vs-card-text{  
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18); 
    font-weight: var(--vs-font-weight-500);
}
.vs-card-sub-text{  
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-regular-font-color);
    font-size: var(--vs-font-size-14);
    line-height: var(--vs-font-line-height-15); 
    font-weight: var(--vs-font-weight-400);
}




/* Customer 360 Common Components*/

.vs-divider-border-light-right{
    border-right: 0.063rem solid #EBEBEB;
}
.vs-divider-border-light-left{
    border-left: 0.063rem solid #EBEBEB;
}

/* Card Sersch Section */
.vs-card-search-section{
    float: var(vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

/* Info Unit Primary */
.vs-card-primary-info-unit{
    margin:0rem;
    padding: 0rem;
}  
.vs-card-primary-info-unit-text{
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18); 
    font-weight: var(--vs-font-weight-600);
}
.vs-card-primary-info-unit-sub-text{
    margin: 0rem;
    padding: 0 0 0.125rem 0;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18); 
    font-weight: var(--vs-font-weight-400);
}

/* On Hover View More Button */
.vs-card-onhover-view-details-btn{
    position: var(--vs-position-absolute);
    margin: 0;
    padding: 0;
    bottom: 1.25rem;
    right: 1.25rem;
    display: none;
}
.vs-card-inner-customer-360:hover .vs-card-onhover-view-details-btn{
    display: block;
}

/* Info Unit */
.vs-card-info-unit{
    margin: 0rem;
    padding: 0rem;
}  
.vs-card-info-unit-text{
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18); 
    font-weight: var(--vs-font-weight-500);
}
.vs-card-info-unit-sub-text{
    margin: 0rem;
    padding: 0 0 0.125rem 0;
    font-family: var(--vs-font-family);
    color: var(--vs-regular-font-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-15); 
    font-weight: var(--vs-font-weight-400);
}

.vs-card-inner-customer-360{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 1.25rem; 
    background: var(--vs-card-inner-customer-360-background-color);
    border: 0.063rem solid var(--vs-card-inner-customer-360-border-color);
    border-radius: var(--vs-border-radius);
} 
.vs-card-inner-customer-360:hover{
    border: 0.063rem solid var(--vs-card-inner-customer-360-hover-border-color); 
    box-shadow: var(--vs-card-inner-customer-360-hover-box-shadow);
}

/* Customer 360 Components CSS*/
/* Basicinfo */
 .vs-customer-basic-info-top-card{
    margin: 0rem;
    padding: 0rem;
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section{
    float: var(--vs-float-left);
    width: 60%;
    margin: 0rem;
    padding: 0rem;
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-profile-img{ 
    float: var(--vs-float-left);
    width: 20%;
    margin: 0rem;
    padding: 0rem;
    border-radius: var(--vs-border-radius);
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-profile-img img{
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    border-radius: var(--vs-border-radius);
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-col{
    float: var(--vs-float-left);
    width: 80%;
    margin: 0rem;
    padding:0 1.25rem 0 2rem;
 }
 .vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-col div{    
    padding:0 2rem 0 0;
 }
.vs-customer-basic-info-top-card .vs-customer-basic-other-info-col{    
    float: var(--vs-float-left);
    width: 40%;
    margin: 0rem;
    padding: 0 0 0 3rem;
 }

.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-collaterals-asset-img{ 
    float: var(--vs-float-left);
    width: 40%;
    margin: 0rem;
    padding: 0rem;
    border-radius: var(--vs-border-radius);
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-collaterals-asset-img img{
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    border-radius: var(--vs-border-radius);
 }
.vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-collaterals-asset-col{
    float: var(--vs-float-left);
    width: 60%;
    margin: 0rem;
    padding:0 1.25rem 0 2rem;
 }
 .vs-customer-basic-info-top-card .vs-customer-basic-info-section .vs-customer-basic-info-collaterals-asset-col div{    
    padding:0 2rem 0 0;
 } 

/*  Customer 360 >> Contact Details Info Unit Components*/
.vs-card-contact-details-info{
    float: var(--vs-float-left);
    width: 100%;  
}  

.vs-card-contact-details-info .vs-card-contact-details-info-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;   
} 

.vs-card-contact-details-info .vs-card-contact-details-info-header .vs-card-contact-details-info-header-text{
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0rem;  
} 

.vs-card-contact-details-info .vs-card-contact-details-info-header .vs-card-contact-details-info-header-text h4{   
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    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-500); 
} 

.vs-card-contact-details-info .vs-card-contact-details-info-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;   
}  
 
.vs-card-contact-details-info hr{
 width: 96%; 
 margin-left: 4%;
} 

.vs-card-contact-details-info .icon{
    float: var(--vs-float-left); 
    margin: 0rem 0.75rem 0 0;
    padding: 0.75rem; 
    background: var(--vs-card-contact-details-info-icon-background-color);
    border-radius: 100%;
}

.vs-card-contact-details-info .icon img{
    float: var(--vs-float-left);
    width: 1rem;
    margin: 0rem;
    padding: 0rem;  
}

/*.vs-card-contact-details-info .icon img{filter: invert(26%) sepia(92%) saturate(2265%) hue-rotate(220deg) brightness(95%) contrast(112%)!important;}*/

/* Customer 360 >> Customer Row Components */
.vs-card-linked-customer-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-linked-customer-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
} 
 

.vs-card-linked-customer-rows .vs-card-linked-customer-images{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    border-radius: var(--vs-border-radius);
}

.vs-card-linked-customer-rows .vs-card-linked-customer-images img{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    border-radius: var(--vs-border-radius);
}

.vs-card-linked-customer-rows .vs-card-linked-customer-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
}

.vs-card-linked-customer-rows .vs-card-linked-customer-content .vs-card-linked-customer-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    border-bottom: 0.063rem solid var(--vs-card-inner-customer-360-border-color);
}

.vs-card-linked-customer-rows .vs-card-linked-customer-content .vs-card-linked-customer-header h4{    
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0 0 1.25rem 0;
    font-family: var(--vs-font-family);
    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-600);
}

.vs-card-linked-customer-rows .vs-card-linked-customer-content .vs-card-linked-customer-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 3.938rem; 
    display: flex;
    align-items: flex-end;
}

.vs-card-linked-customer-rows .vs-card-linked-customer-content .vs-card-linked-customer-body .vs-card-info-unit{
    float: var(--vs-float-left);
    margin: 0 2rem 0 0;
    padding: 0rem;
} 

.vs-card-linked-customer-rows .vs-card-linked-customer-content .vs-card-linked-customer-body .vs-card-info-unit:last-child{
    margin: 0rem;
    padding: 0rem;
} 


/* Customer 360 >> Bank Accounts Components */
.vs-card-customer-bank-accounts-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-customer-bank-accounts-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
}  
  
.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
}

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0 0 1.25rem 0; 
    border-bottom: 0.063rem solid var(--vs-card-inner-customer-360-border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-header h4{    
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    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-600);
}

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-header h5{    
    float: var(--vs-float-left); 
    margin: 0 0 0 1rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-font-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-600);
}

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 3.938rem; 
    display: flex;
    align-items: flex-end;
}

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-body .vs-card-info-unit{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0 2rem 0 0; 
} 

.vs-card-customer-bank-accounts-rows .vs-card-customer-bank-accounts-content .vs-card-customer-bank-accounts-body .vs-card-info-unit:last-child{
    margin: 0rem;
    padding: 0rem; 
} 
 
.vs-card-customer-bank-accounts-edit-details-btn{
    position: var(--vs-position-absolute);
    margin: 0;
    padding: 0;
    bottom: 1.25rem;
    right: 1.25rem; 
}

/* Customer 360 >> Documents Components */
.vs-card-customer-documents-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-customer-documents-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
}  
  
.vs-card-customer-documents-rows .vs-card-customer-documents-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
}

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0 0 1.25rem 0; 
    border-bottom: 0.063rem solid var(--vs-card-inner-customer-360-border-color); 
}

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-header h4{    
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0 1rem 0 0;
    font-family: var(--vs-font-family);
    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-600);
}

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-header h5{    
    float: var(--vs-float-left); 
    margin: 0rem;
    padding:  0 0 0 1rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-font-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-600);
    border-left: 0.063rem solid #EBEBEB;
}

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 3.938rem; 
    display: flex;
    align-items: flex-end;
} 

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-body .vs-card-info-unit{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0 2rem 0 0; 
} 

.vs-card-customer-documents-rows .vs-card-customer-documents-content .vs-card-customer-documents-body .vs-card-info-unit:last-child{
    margin: 0rem;
    padding: 0rem; 
} 

/* Customer 360 >> Collaterals Components */
 .vs-card-collateral-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-collateral-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
} 
 
.vs-card-collateral-view-details-btn{
    position: var(--vs-position-absolute);
    margin: 0;
    padding: 0;
    bottom: 1.25rem;
    right: 1.25rem;
    display: none;
}

.vs-card-collateral-rows:hover .vs-card-collateral-view-details-btn{
    display: block;
}

.vs-card-collateral-rows .vs-card-collateral-images{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    border-radius: var(--vs-border-radius);
}

.vs-card-collateral-rows .vs-card-collateral-images img{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    border-radius: var(--vs-border-radius);
}

.vs-card-collateral-rows .vs-card-collateral-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
}

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0 0 1.25rem 0;
    border-bottom: 0.063rem solid var(--vs-card-inner-customer-360-border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-header .counter{    
    float: var(--vs-float-left);
    margin: 0 1rem 0 0;
    padding:0.4rem 0.6rem;
    font-family: var(--vs-font-family);
    color: var(--vs-white-font-color);
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-weight: var(--vs-font-weight-600);
    background: var(--vs-primary-color);
    border-radius: var(--vs-border-radius);
}

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-header h4{    
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    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-600);
}
.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-header img{    
    float: var(--vs-float-left);
    width: 1.2rem;
    margin: 0 0 0 1rem;
    padding: 0rem; 
}

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 3.938rem; 
    display: flex;
    align-items: flex-end;
}

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-body .vs-card-info-unit{
    float: var(--vs-float-left);
    margin: 0 2rem 0 0;
    padding: 0rem;
} 

.vs-card-collateral-rows .vs-card-collateral-content .vs-card-collateral-body .vs-card-info-unit:last-child{
    margin: 0rem;
    padding: 0rem;
} 

/* Customer 360 >> Collateral Linked Loans Components */
.vs-card-customer-linked-loans-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-customer-linked-loans-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
}  
  
.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
}

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-header{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0 0 1.25rem 0; 
    border-bottom: 0.063rem solid var(--vs-card-inner-customer-360-border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-header h4{    
    float: var(--vs-float-left); 
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    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-600);
}

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-header h5{    
    float: var(--vs-float-left); 
    margin: 0.8rem 0 0 0;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-font-color);
    font-size: var(--vs-font-size-16);
    line-height: var(--vs-font-line-height-16);
    font-weight: var(--vs-font-weight-500);
}

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 3.938rem; 
    display: flex;
    align-items: flex-end;
}

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-body .vs-card-info-unit{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0 2rem 0 0; 
} 

.vs-card-customer-linked-loans-rows .vs-card-customer-linked-loans-content .vs-card-customer-linked-loans-body .vs-card-info-unit:last-child{
    margin: 0rem;
    padding: 0rem; 
} 

/* Customer 360 >> Collateral Documents */
.vs-card-customer-collateral-documents-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-customer-collateral-documents-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
}  
  
.vs-card-customer-collateral-documents-rows .vs-card-customer-collateral-documents-content{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
} 

.vs-card-customer-collateral-documents-rows .vs-card-customer-collateral-documents-content .vs-card-customer-collateral-documents-body{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem; 
    min-height: 2rem; 
    display: grid;
    align-items: center;
} 


.vs-card-customer-collateral-documents-rows .vs-card-customer-collateral-documents-content .vs-card-customer-collateral-documents-body h6{    
    float: var(--vs-float-left); 
    margin: 0 0 0.625rem 0;
    padding: 0rem;
    font-family: var(--vs-font-family);
    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-600);
}
.vs-card-inner-customer-360.vs-card-customer-collateral-documents-rows .vs-card-onhover-view-details-btn{
    bottom: 1.6rem;
}

/* Customer 360 >> Collateral Images */
.vs-card-customer-collateral-images-section{
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}

.vs-card-customer-collateral-images-rows{ 
    float: var(--vs-float-left);
    width: 100%; 
    position: var(--vs-position-relative);
    padding: 0rem;
    margin:0 0 1.25rem 0!important;
    border: 0rem!important;

}  

.vs-card-customer-collateral-images-rows img{ 
    float: var(--vs-float-left);
    width: 100%; 
    margin: 0;
    padding: 0;    
    border-radius: var(--vs-border-radius);
    position: var(--vs-position-relative);
}  
 

.vsImagesModalPopup {
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
}
 
.vs-images-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 6.25rem; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
 
.vs-images-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 50rem;
  border-radius: 0.25rem;
}  
.vs-images-modal-content{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: var(--vs-position-absolute);
  top: 0.938rem;
  right: 2.188rem;
  color: #fff;
  font-size: var(--vs-font-size-40);
  font-weight: 100;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Table Components */
table.vs-table-no-odd-even tr{
    background: var(--vs-white-background-color)!important;
}


table.vs-table {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family)!important;
    background: var(--vs-table-background-color);
    border-top: 0.063rem solid var(--vs-table-border-color);
    border-right: 0rem;
    border-bottom: 0rem;
    border-left: 0rem;
}
table.vs-table tr th {
    padding:0.625rem 0.5rem;
    margin: 0rem;
    color: var(--vs-primary-second-font-color);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-600);
    background-color: var(--vs-table-th-background-color);
    border: 0rem;
}
table.vs-table tr td {
    padding: 0.625rem 0.625rem;
    margin: 0rem;
    color: var(--vs-primary-second-font-color);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    border: 0rem;
}
table.vs-table tr:hover{
    background: var(--vs-table-row-hover-background-color)!important;
}
table.vs-table tr:last-child:hover{
    background: var(--vs-transparent-background-color)!important;
}
table.vs-table tr th:first-child { 
    padding-left: 0.938rem!important;
}
table.vs-table tr th:last-child { 
    padding-right: 0.938rem!important;
} 
table.vs-table tr td:first-child { 
    padding-left: 0.938rem!important;
}
table.vs-table tr td:last-child { 
    padding-right: 0.938rem!important;
} 
table.vs-table tr.vs-table-search-section td:first-child{ 
    padding-left: 0.938rem!important;
} 
table.vs-table tr.vs-table-search-section td:last-child { 
    padding-right: 0.938rem!important;
} 
table.vs-table tr:nth-child(odd) {
    background: var(--vs-table-rows-odd-background-color);
}
table.vs-table-rows-no-bg tr:nth-child(odd) {
    background: var(--vs-table-background-color);
}
table.vs-table tr.vs-table-search-section {
    background: var(--vs-white-background-color)!important;
}
table.vs-table tr.vs-table-search-section td {
    padding: 1.25rem 0.313rem;
}
table.vs-table tr.vs-table-search-section td .vs-form-element-text-input {
    padding: 0.375rem 1.375rem 0.375rem 0.313rem;
}
table.vs-table tr.vs-table-search-section td .vs-table-search-section-btn-col {
    float: var(--vs-float-left);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table.vs-table tr.vs-table-search-section td .vs-table-search-section-btn-col {
    float: var(--vs-float-left);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table.vs-table tr td .vs-table-action-btn-col {
    float: var(--vs-float-left);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
table.vs-table tr.vs-table-search-section td .vs-form-element-text-input.vs-form-element-date-picker {
    background-position: 95%;
}
/* Pagination */

.vs-pagination-section {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding:2.5rem 1.25rem; 
    background: var(--vs-white-background-color)!important;
} 

.vs-pagination-page-counter-column{
    float: var(--vs-float-left); 
    width: 30%;
    margin: 0rem;
    padding: 0rem;
}
 
.vs-pagination-page-select-dropdown {
    width: 100%;
    height: 2.5rem;
    background: var(--vs-form-element-text-input-background-color);
    border-radius: var(--vs-border-radius);
    border-color: var(--vs-form-element-text-input-border-color);
    border-width: 0.063rem;
    border-style: solid;
    margin: 0 0 0 0.625rem;
    padding: 0.375rem 1.875rem 0.375rem 0.75rem;
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    color: var(--vs-secondary-font-color);
}
.vs-pagination-page-select-dropdown::placeholder {
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    color: var(--vs-regular-font-color);
}
.vs-pagination-page-select-dropdown:hover {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-hover-border-color);
}
.vs-pagination-page-select-dropdown:focus {
    /*  background: var(--vs-form-element-text-input-background-color);*/
    border-color: var(--vs-form-element-text-input-focus-border-color);
    box-shadow: var(--vs-form-element-text-input-focus-box-shadow);
    z-index: unset!important;
}

.vs-pagination-column {
    float: var(--vs-float-right); 
    width: 70%;
    margin: 0rem;
    padding: 0rem; 
    text-align: right;
} 
.vs-pagination{    
    float: var(--vs-float-right);  
    margin: 0rem;
    padding: 0rem;  
    border:0.063rem solid #AEADAD;
    border-radius: var(--vs-border-radius);
}

.vs-pagination .link{
    float: var(--vs-float-left);
    padding: 0.625rem 0.938rem;
    margin: 0rem;
    border: 0rem;
    color: #252A31;
}
.vs-pagination .link.current{
    float: var(--vs-float-left);
    padding: 0.625rem 0.938rem;
    margin: 0rem;
    border: 0rem;
    color: var(--vs-primary-color);
    background: var(--vs-primary-light-color);
}
.vs-pagination .link.disabled{
    float: var(--vs-float-left);
    padding: 0.625rem 0.938rem;
    margin: 0rem;
    border: 0rem;
    cursor:not-allowed;
}

/* Status Tags */
/* Success Status Tags */
.vs-status-success-tag {
    position: var(--vs-position-relative);
    background: var(--vs-success-status-light-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-success-status-color);
    border-radius: var(--vs-status-tag-border-radius);
    padding: 0.375rem 0.625rem 0.375rem 1.563rem;
    margin: 0rem;
    white-space: nowrap;
}
.vs-status-success-tag:before {
    content: "\f111";
    font-family: FontAwesome;
    position: var(--vs-position-absolute);
    top: 0.563rem;
    left: 0.563rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-success-status-color);
    line-height: var(--vs-font-line-height-12);
    margin: 0rem;
    padding: 0rem;
}


/* Danger Status Tags */
.vs-status-danger-tag {
    position: var(--vs-position-relative);
    background: var(--vs-status-danger-light-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-status-danger-color);
    border-radius: var(--vs-status-tag-border-radius);
    padding: 0.375rem 0.625rem 0.375rem 1.563rem;
    margin: 0rem;
    white-space: nowrap;
}
.vs-status-danger-tag:before {
    content: "\f111";
    font-family: FontAwesome;
    position: var(--vs-position-absolute);
    top: 0.563rem;
    left: 0.563rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-status-danger-color);
    line-height: var(--vs-font-line-height-12);
    margin: 0rem;
    padding: 0rem;
}

/* Warning Status Tags */
.vs-status-warning-tag {
    position: var(--vs-position-relative);
    background: var(--vs-status-warning-light-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-status-warning-color);
    border-radius: var(--vs-status-tag-border-radius);
    padding: 0.375rem 0.625rem 0.375rem 1.563rem;
    margin: 0rem;
    white-space: nowrap;
}
.vs-status-warning-tag:before {
    content: "\f111";
    font-family: FontAwesome;
    position: var(--vs-position-absolute);
    top: 0.563rem;
    left: 0.563rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-status-warning-color);
    line-height: var(--vs-font-line-height-12);
    margin: 0rem;
    padding: 0rem;
}

/* Info Status Tags */
.vs-status-info-tag {
    position: var(--vs-position-relative);
    background: var(--vs-status-info-light-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-status-info-color);
    border-radius: var(--vs-status-tag-border-radius);
    padding: 0.375rem 0.625rem 0.375rem 1.563rem;
    margin: 0rem;
    white-space: nowrap;
}
.vs-status-info-tag:before {
    content: "\f111";
    font-family: FontAwesome;
    position: var(--vs-position-absolute);
    top: 0.563rem;
    left: 0.563rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-status-info-color);
    line-height: var(--vs-font-line-height-12);
    margin: 0rem;
    padding: 0rem;
}

/* Pending Status Tags */
.vs-status-pending-tag {
    position: var(--vs-position-relative);
    background: var(--vs-status-pending-light-color);
    font-size: var(--vs-font-size-13);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-status-pending-color);
    border-radius: var(--vs-status-tag-border-radius);
    padding: 0.375rem 0.625rem 0.375rem 1.563rem;
    margin: 0rem;
    white-space: nowrap;
}
.vs-status-pending-tag:before {
    content: "\f111";
    font-family: FontAwesome;
    position: var(--vs-position-absolute);
    top: 0.563rem;
    left: 0.563rem;
    font-size: var(--vs-font-size-12);
    color: var(--vs-status-pending-color);
    line-height: var(--vs-font-line-height-12);
    margin: 0rem;
    padding: 0rem;
}

/* All Status Common Styling CSS*/
.vs-status-tag-no-dot{
    padding: 0.375rem 0.625rem!important; 
}
.vs-status-tag-no-dot:before{ 
    display: none!important;
}

.vs-status-tag-no-bg{
    background: transparent!important;
}

.vs-status-tag-with-icon{
    padding: 0.375rem 0.625rem!important; 
}
.vs-status-tag-with-icon:before{ 
    display: none!important;
}
.vs-status-tag-icon-left{ 
    width: 1rem;
    padding: 0rem;
    margin: 0 0.3rem 0 0;
}
.vs-status-tag-icon-right{ 
    width: 1rem;
    padding: 0rem;
    margin: 0 0 0 0.3rem;
}

.vs-status-success-tag-icon{  
    filter: invert(53%) sepia(33%) saturate(980%) hue-rotate(91deg) brightness(104%) contrast(82%);
} 
.vs-status-danger-tag-icon{  
    filter: invert(26%) sepia(98%) saturate(2099%) hue-rotate(339deg) brightness(79%) contrast(102%);
} 
.vs-status-warning-tag-icon{  
    filter: invert(78%) sepia(29%) saturate(952%) hue-rotate(3deg) brightness(83%) contrast(92%);
} 
.vs-status-info-tag-icon{  
    filter: invert(45%) sepia(7%) saturate(3667%) hue-rotate(156deg) brightness(83%) contrast(86%);
} 



/* Horizontal Tabs 1 Components */
.vs-h-tabs-container {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
ul.vs-h-tabs-navbar {
    float: var(--vs-float-left);
    width: 100%!important;
    margin: 0rem!important;
    padding: 0rem!important;
    border: 0rem!important;
    background: var(--vs-white-background-color)!important;
    border-radius: var(--vs-border-radius)!important;
    box-shadow: var(--vs-h-tabs-navbar-box-shadow)!important;
}
ul.vs-h-tabs-navbar li.nav-item {
    float: var(--vs-float-left);
    margin: 0 1.25rem!important;
    padding: 0rem!important;
    border: 0rem!important;
    position: var(--vs-position-relative);
}
ul.vs-h-tabs-navbar li.nav-item a.nav-link {
    float: var(--vs-float-left);
    margin: 0rem!important;
    padding: 0.938rem 0!important;
    border: 0rem!important;
    color: var(--vs-regular-font-color);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-16);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-400);
}
ul.vs-h-tabs-navbar li.nav-item a.nav-link.active {
    color: var(--vs-primary-color);
    font-weight: var(--vs-font-weight-600);
    background: var(--vs-transparent-background-color);
}
ul.vs-h-tabs-navbar li.nav-item a.nav-link:hover.active{
   font-weight: var(--vs-font-weight-600); 
}
ul.vs-h-tabs-navbar li.nav-item a.nav-link.active:before {
    content: '';
    width: 100%;
    height: 0.25rem;
    background: var(--vs-primary-color);
    position: var(--vs-position-absolute);
    top: 0rem;
    left: 0rem;
    border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
}
ul.vs-h-tabs-navbar li.nav-item a.nav-link:hover {
    background: var(--vs-transparent-background-color)!important;
    color: var(--vs-primary-color)!important;
    font-weight: var(--vs-font-weight-400);
} 

ul.vs-h-tabs-navbar li.nav-item.active a {
    color: var(--vs-primary-color)!important;
    font-weight: var(--vs-font-weight-600);
    background: var(--vs-transparent-background-color)!important;
}
ul.vs-h-tabs-navbar li.nav-item a:hover {
    color: var(--vs-primary-color)!important;
    background: var(--vs-transparent-background-color)!important;
    font-weight: var(--vs-font-weight-600);
}
.vs-h-tabs-content {
    float: left!important;
    width: 100%!important;
    margin: 1.25rem 0 0 0!important;
    padding: 2rem!important;
    border: 0rem!important;
    background: var(--vs-white-background-color)!important;
    border-radius: var(--vs-border-radius)!important;
    box-shadow: var(--vs-h-tabs-content-box-shadow)!important;
}
/*.vs-h-tabs-content .vs-form-element-container .form-group {
    padding-bottom: var(--vs-padding-bottom-30);
    margin: var(--vs-margin-all-0)!important;
}*/
.scrtabs-tab-scroll-arrow {
    display: none;
}

/* Horizontal Tabs 2 Components */
.vs-secondary-h-tabs-container {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
ul.vs-secondary-h-tabs-navbar {
    float: var(--vs-float-left);
    width: 100%!important;
    margin: 0rem!important;
    padding: 0rem!important;
    border: 0rem!important;
    background: var(--vs-transparent-background-color)!important;  
}
ul.vs-secondary-h-tabs-navbar li.nav-item {
    float: var(--vs-float-left);
    margin: 0 0.625rem 0 0!important;
    padding: 0rem!important;
    border: 0rem!important;
    position: var(--vs-position-relative);
}
ul.vs-secondary-h-tabs-navbar li.nav-item a.nav-link {
    float: var(--vs-float-left);
    margin: 0rem!important;
    padding: 0.5rem 1.25rem!important;
    border: 0rem!important;
    color: var(--vs-regular-font-color);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    background: var(--vs-secondary-h-tabs-navbar-background-color);
    border-radius: 1.875rem;
}  
ul.vs-secondary-h-tabs-navbar li.nav-item a.nav-link.active {
    float: var(--vs-float-left);
    margin: 0rem!important;
    padding: 0.5rem 1.25rem!important;
    border: 0rem!important;
    color: var(--vs-white-font-color);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    background: var(--vs-primary-color);
    border-radius: 1.875rem;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}
ul.vs-secondary-h-tabs-navbar li.nav-item a.nav-link:hover {
     float: var(--vs-float-left);
    margin: 0rem!important;
    padding: 0.5rem 1.25rem!important;
    border: 0rem!important;
    color: var(--vs-white-font-color);
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-15);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
    background: var(--vs-primary-color)!important;
    border-radius: 1.875rem!important;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25)!important;
} 
 
.vs-secondary-h-tabs-content {
    float: left!important;
    width: 100%!important;
    margin: 1.25rem 0 0 0!important;
    padding: 0rem!important;
    border: 0rem!important;
    background: var(--vs-white-background-color)!important;
    border-radius: var(--vs-border-radius)!important;
    box-shadow: var(--vs-h-tabs-content-box-shadow)!important;
} 


/* Table Action Dropdown Menu */
.dropdown.vs-table-action-dropdown-menu {
    padding: 0rem;
    margin: 0rem;
}
.dropdown.vs-table-action-dropdown-menu .dropdown-menu {
    min-width: 12.5rem!important;
    padding: 0rem!important;
    margin: 0rem!important;
    border: 0.063rem solid var(--vs-table-action-dropdown-menu-border-color)!important;
    background: var(--vs-table-action-dropdown-menu-background-color)!important;
    border-radius: var(--vs-border-radius)!important;
    box-shadow: var(--vs-table-action-dropdown-menu-box-shadow)!important;
    left: -3.125rem!important;
}
.dropdown.vs-table-action-dropdown-menu .dropdown-menu a.dropdown-item {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.625rem 1.25rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-family: var(--vs-font-family);
    color: var(--vs-secondary-font-color);
    font-weight: var(--vs-font-weight-500);
    border-bottom: 0.063rem solid var(--vs-table-action-dropdown-menu-border-color);
}
.dropdown.vs-table-action-dropdown-menu .dropdown-menu a.dropdown-item:last-child {
    border-bottom: 0rem!important;
}
.dropdown.vs-table-action-dropdown-menu .dropdown-menu a.dropdown-item:hover {
    background: var(--vs-table-action-dropdown-menu-list-hover-background-color)!important;
}
/*.dropdown.vs-table-action-dropdown-menu.open>.dropdown-menu {
    display: block;
    position: var(--vs-position-absolute);
    left: -10rem;
} */

/* Accordion */
.vs-accordion-section {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.vs-accordion-section .accordion {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.vs-accordion-section .accordion .card.vs-accordion-card {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-background-color);
    border: 0.063rem solid var(--vs-accordion-border-color);
    box-shadow: var(--vs-accordion-box-shadow);
    border-radius: var(--vs-border-radius);
    overflow: visible;
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-header-background-color);
    border-radius: var(--vs-accordion-header-border-radius);
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header {
    float: var(--vs-float-left);
    width: 100%;
    padding: 1rem 1.25rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-header-background-color);
    border-radius: var(--vs-accordion-header-border-radius);
    cursor: pointer;
    /*display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;*/
    box-shadow: var(--vs-accordion-header-box-shadow);
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header.collapsed{
  border-radius: var(--vs-border-radius);  
}

.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header .vs-accordion-card-header-title {
    float: var(--vs-float-left);
    padding: 0rem;
    margin: 0rem;
    font-size: var(--vs-font-size-16);
    font-weight: var(--vs-font-weight-600);
    line-height: var(--vs-font-line-height-16);
    color: var(--vs-primary-second-font-color);
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header-title-count{ 
    margin: 0 0 0 0.625rem;
    padding: 0.125rem 0.5rem;
    background: var(--vs-primary-color);
    color: var(--vs-white-font-color);
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-weight: var(--vs-font-weight-600);
    border-radius: 0.125rem;
}

.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header .vs-accordion-card-header-sub-title {
    padding: 0rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    line-height: var(--vs-font-line-height-13);
    color: var(--vs-primary-second-font-color);
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header .vs-accordion-card-header-icon {
    float: var(--vs-float-right);
    padding: 0rem;
    margin: 0rem;
    position: var(--vs-position-absolute);
    right: 0.938rem;
    top: 0.313rem;
}
.vs-accordion-section .accordion .card.vs-accordion-card .vs-accordion-card-header .vs-accordion-card-header-icon i {
    float: var(--vs-float-right);
    padding: 0rem;
    margin: 0rem;
    font-size: var(--vs-font-size-24);
    color: var(--vs-regular-font-color);
}
.vs-accordion-section .accordion .card.vs-accordion-card .card-header.vs-accordion-card-header:not(.collapsed) .rotate-icon {
    transform: rotate(180deg);
}
.vs-accordion-section .accordion .card.vs-accordion-card .card-body.vs-accordion-card-body {
    float: var(--vs-float-left);
    width: 100%;
    padding: 1.25rem;
    margin: 0rem;
    border: 0rem;
}

/* Accordion Optional */
.vs-accordion-section-optional {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.vs-accordion-section-optional .accordion-optional {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-background-color);
    border: 0rem;
    box-shadow: none!important;
    border-radius: 0rem;
    overflow: visible;
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-header-background-color);
    border-radius: 0rem;
    box-shadow: none!important;
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0.375rem 0rem 1rem 0rem;
    margin: 0rem;
    border: 0rem;
    background: var(--vs-accordion-header-background-color); 
    cursor: pointer; 
    box-shadow: none!important;
    position: var(--vs-position-relative);
} 
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header:after {
    content: '';
    width: 100%;
    height: 0.063rem;
    background-color: var(--vs-border-color);
    position: var(--vs-position-absolute);
    top: 1rem;
    left:0rem;
}

.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header .vs-accordion-optional-card-header-title {
    float: var(--vs-float-left);
    padding: 0rem 1rem 0rem 0rem;
    margin: 0rem;
    z-index: 1;
    font-size: var(--vs-font-size-16);
    font-weight: var(--vs-font-weight-600);
    line-height: var(--vs-font-line-height-16);
    color: var(--vs-primary-second-font-color);    
    background:var(--vs-white-background-color);
    position: var(--vs-position-relative);
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header-title-count{ 
    margin: 0 0 0 0.625rem;
    padding: 0.125rem 0.5rem;
    background: var(--vs-primary-color);
    color: var(--vs-white-font-color);
    font-size: var(--vs-font-size-12);
    line-height: var(--vs-font-line-height-12);
    font-weight: var(--vs-font-weight-600);
    border-radius: 0.125rem;
}

.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header .vs-accordion-optional-card-header-sub-title {
    padding: 0rem;
    margin: 0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-400);
    line-height: var(--vs-font-line-height-13);
    color: var(--vs-primary-second-font-color);
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header .vs-accordion-optional-card-header-icon {
    float: var(--vs-float-right);
    padding: 0rem 0rem 0rem 1.6rem;
    margin: 0rem;
    position: var(--vs-position-absolute);
    right: 0rem;
    top: 0rem;
    background:var(--vs-white-background-color);
    z-index: 1;
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header .vs-accordion-optional-card-header-icon i {
    float: var(--vs-float-right);
    padding: 0.625rem;
    margin: 0rem;
    font-size: var(--vs-font-size-16);
    line-height: var(--vs-font-line-height-10);
    color: var(--vs-regular-font-color);
    border: 0.063rem solid var(--vs-regular-font-color);
    border-radius: var(--vs-border-radius);
}

.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .vs-accordion-optional-card-header .vs-accordion-optional-card-header-icon.delete-icon{
    right: 3.6rem;
}
.vs-accordion-optional-card-header-icon:not(.collapsed) .rotate-icon {
    transform: rotate(180deg);
}
.vs-accordion-section-optional .accordion-optional .card.vs-accordion-optional-card .card-body.vs-accordion-optional-card-body {
    float: var(--vs-float-left);
    width: 100%;
    padding: 1.25rem 0rem;
    margin: 0rem;
    border: 0rem;
}

/*Search Filter Body Toggle*/
.vs-search-filter-body-toggle-container {
    float: var(--vs-float-left);
    width: 25rem;
    background: var(--vs-white-background-color);
    -webkit-transition: right .2s ease;
    -o-transition: right .2s ease;
    transition: right .2s ease;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -25rem;
    z-index: 9999;
    overflow-x: hidden;
}
.vs-search-filter-body-toggle-container .vs-search-filter-body-wrapper {
    float: var(--vs-float-left);
    width: 100%;
    position: var(--vs-position-relative);
    padding: 0;
    margin: 0
}
.vs-search-filter-body-toggle-container.open {
    right: 0
}
.vs-search-filter-body-pannel {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
}
.vs-search-filter-header {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 1.25rem;
    border-bottom: 0.063rem solid var(--vs-table-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vs-search-filter-header h4 {
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    font-size: var(--vs-font-size-16);
    font-weight: var(--vs-font-weight-600);
    color: var(--vs-primary-color);
}
.vs-search-filter-close-button {
    border: 0rem;
    padding: 0rem;
    margin: 0rem;
    background: transparent;
    cursor: pointer;
}
.vs-search-filter-close-button img {
    float: var(--vs-float-left);
    width: 0.875rem;
    height: 0.875rem;
    border: 0rem;
    padding: 0rem;
    margin: 0rem;
}
.vs-search-filter-body {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 1.25rem;
}
.vs-search-filter-body-table {
    float: var(--vs-float-left);
    width: 100%;
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
}
.vs-search-filter-body-table tr th {
    padding: 0rem;
    margin: 0rem;
    border: 0rem;
}
.vs-search-filter-body-table tr td {
    padding: 0.625rem 0rem;
    margin: 0rem;
    border: 0rem;
}
.vs-search-filter-footer {
    float: var(--vs-float-left);
    width: 100%;
    margin: 0rem;
    padding: 1.25rem;
    border-top: 0.063rem solid var(--vs-table-border-color);
}
.vs-search-filter-body-toggle-overlay {
    position: var(--vs-position-absolute);
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0)
}
.vs-search-filter-body-toggle-overlay.open {
    position: fixed;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
    z-index: 9999;
    background: rgba(0, 0, 0, .6)
    /* url(../images/icons/close-icon-white.svg) no-repeat 73% 2%*/
    ;
    background-size: 1.125rem;
}

/* Modal Popup Components*/
.modal-content{
    border: 0rem!important;
}
.modal-header { 
    width: 100%;
    margin:0;
    padding:2rem 2rem 0rem 2rem!important;
    border-bottom:0rem!important;
}
.modal-title {
    float: var(--vs-float-left);
    position: var(--vs-position-relative);
    margin: 0rem;
    padding: 0rem;
    font-family: var(--vs-font-family);
    color: var(--vs-primary-color);
    font-size: var(--vs-font-size-18);
    line-height: var(--vs-font-line-height-18);
    font-weight: var(--vs-font-weight-500);
}
.modal-title:after {
    content: '';
    width: 40%;
    height: 0.188rem;
    background: var(--vs-primary-color);
    position: var(--vs-position-absolute);
    bottom: -1rem;
    left: 0rem;
    margin: 0rem;
    padding: 0rem;
}

.modal-header .close{
    opacity:inherit!important;
}

.modal-header .close span{
    font-size: var(--vs-font-size-30);
    font-weight: var(--vs-font-weight-100);
    color: var(--vs-black-font-color);
}

.modal-body{    
    width: 100%;
    margin:0;
    padding:2rem!important;
}

.modal-footer { 
    width: 100%;
    margin:0;
    padding: 0rem 2rem 2rem 2rem!important;    
    border-top:0rem!important;
}
   



 /* Sidebar Menu  */ 
.vs-sidebar-toggle-container{
    height: 100%;
    padding-inline-start: 5rem; 
    transition: padding-inline-start .2s ease-in-out;
    will-change: padding-inline-start;
}
 
.vs-sidebar-toggle-container.vs-sidebar-menu-expanded-container{
    padding-inline-start: 18rem;
    transition: padding-inline-start .2s ease-in-out;
    will-change: padding-inline-start;
}

.vs-sidebar-menu{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    background: var(--vs-sidebar-menu-background-color);
}

.vs-sidebar-menu .vs-sidebar-nav:not(.vs-sidebar-menu-expanded) {
  float: var(--vs-float-left);
  inline-size: 5rem;
  position: fixed;
  top: 0;  
  left: 0;
  padding: 4rem 0rem 3rem 0rem;
  white-space: nowrap;
  height: 100vh; 
  background-color: var(--vs-sidebar-menu-background-color);
  box-shadow: var(--vs-sidebar-menu-box-shadow);  
  z-index: 1;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: transform .25s ease-in-out,inline-size .25s ease-in-out,box-shadow .25s ease-in-out;
  will-change: transform,inline-size;
}

.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded { 
  float: var(--vs-float-left);
  inline-size: 18rem;
  position: fixed;
  top: 0;  
  left: 0;
  padding: 4rem 1rem 3rem 1rem;
  height: 100vh; 
  background-color: var(--vs-sidebar-menu-background-color);
  box-shadow: var(--vs-sidebar-menu-box-shadow);  
  z-index: 1;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: transform .25s ease-in-out,inline-size .25s ease-in-out,box-shadow .25s ease-in-out;
  will-change: transform,inline-size;
}

.vs-sidebar-menu .vs-sidebar-nav:hover{
  float: var(--vs-float-left);
  inline-size: 18rem;
  position: fixed;
  top: 0;  
  left: 0;
  padding: 4rem 1rem 3rem 1rem;
  height: 100vh; 
  background-color: var(--vs-sidebar-menu-background-color);
  box-shadow: var(--vs-sidebar-menu-box-shadow);  
  z-index: 99;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: transform .25s ease-in-out,inline-size .25s ease-in-out,box-shadow .25s ease-in-out;
  will-change: transform,inline-size;
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container {
  float: var(--vs-float-left);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  overflow: auto;
  scrollbar-width: none; /* For mozilla */
  background: var(--vs-sidebar-menu-background-color);
  z-index: 9999;
} 
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-wrapper{
    float: var(--vs-float-left);
    margin: 0rem;
    padding: 0rem;
    background: var(--vs-sidebar-menu-background-color);
    z-index: 9999;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container::-webkit-scrollbar {
  display: none;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-toggle-btn {
  float: var(--vs-float-left);
  width: 100%;
  margin:0rem;
  padding: 0 1.8rem;
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-toggle-btn .vs-humber-menu-icon{
    float: var(--vs-float-left); 
    background:url(../images/icons/hamburger-menu-icon-black.svg) no-repeat;
    width: 1.125rem;
    height: 1.125rem;
    margin:0rem;
    padding: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-toggle-btn .vs-sidebar-nav-close-icon{
    float: var(--vs-float-left); 
    background:url(../images/icons/close-icon-dark-gray.svg) no-repeat;
    background-size: 1rem;
    width: 1.125rem;
    height: 1.125rem;
    margin:0rem;
    padding: 0rem;
} 

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list {
   float: var(--vs-float-left);
   width: 100%;
   margin: 0rem;
   padding: 0rem; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items{
   float: var(--vs-float-left);
   width: 100%;
   margin: 0rem;
   padding: 0rem; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-header {
  float: var(--vs-float-left); 
  width: 100%;
  margin:0rem;
  padding: 0 1.8rem;
  border-bottom: 0.063rem solid #EBEBEB;
}

.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-header{
   padding: 0 0.5rem !important;
}

.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-header{
   padding: 0 0.5rem !important;
}

.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-toggle-btn{
   padding: 0 0.5rem !important;
}

.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-toggle-btn{
    padding: 0 0.5rem !important;
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-header img.vs-sidebar-nav-header-info-icon{
  float: var(--vs-float-left);  
  margin:4rem 0rem;
  padding: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-header .vs-sidebar-nav-header-info{
  float: var(--vs-float-left); 
  width: 100%;
  margin:0rem;
  padding: 1.875rem 0 2rem 0; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-header .vs-sidebar-nav-header-info h2{
  float: var(--vs-float-left); 
  width: 100%;
  margin:0 0 0.5rem 0;
  padding: 0rem; 
  font-size: var(--vs-font-size-16);
  font-weight: var(--vs-font-weight-600);
  color: var(--vs-sidebar-menu-header-font-color);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-header .vs-sidebar-nav-header-info h3{
  float: var(--vs-float-left); 
  width: 100%;
  margin:0rem;
  padding: 0 0 1rem 0; 
  font-size: var(--vs-font-size-15);
  font-weight: var(--vs-font-weight-400);
  color: var(--vs-sidebar-menu-header-font-color);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown {
  float: var(--vs-float-left);
  width: 100%;
  margin: 1.5rem 0 0 0;
  padding: 0;
  /*overflow: hidden;
  max-height: 1.313rem;*/
  transition: .4s ease-in-out;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card{
  float: var(--vs-float-left);
  width: 100%;
  margin: 0.375rem 0;
  padding: 0rem;  
  border: 0rem;
  border-radius: 0rem;  
  box-shadow: none;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header{
  float: var(--vs-float-left);
  width: 100%; 
  border: 0rem;
  background: transparent;
  border-radius: 0rem; 
  margin: 0rem; 
  padding:0rem;
  box-shadow: none;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
  background-color: var(--vs-primary-light-color); 
  position: var(--vs-position-relative);  
  border-radius: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active:before{
    content: '';
    position: var(--vs-position-absolute);
    height: 100%;
    width: 0.313rem;
    background: var(--vs-primary-color);
    left: 0rem;
    top: 0rem; 
    border-radius: 0rem;
}
/* ---- Menu Active State CSS Start ---- */
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
  background-color: var(--vs-sidebar-nav-dropdown-card-header-active-background-color); 
  position: var(--vs-position-relative);  
  border-radius: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active:before{
    display: none;
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(52%) sepia(12%) saturate(5%) hue-rotate(312deg) brightness(85%) contrast(86%);
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(52%) sepia(12%) saturate(5%) hue-rotate(312deg) brightness(85%) contrast(86%);
}
/* ---- Menu Hover State CSS Start ---- */
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
  background-color: var(--vs-sidebar-nav-dropdown-card-header-active-background-color); 
  position: var(--vs-position-relative);  
  border-radius: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active:before{
    display: none;
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(52%) sepia(12%) saturate(5%) hue-rotate(312deg) brightness(85%) contrast(86%);
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(52%) sepia(12%) saturate(5%) hue-rotate(312deg) brightness(85%) contrast(86%);
}

/* ---- Sidebar No Submenu CSS Start ---- */
/* ---- Menu Active State CSS Start ---- */
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
  background-color: var(--vs-primary-light-color); 
  position: var(--vs-position-relative);  
  border-radius: var(--vs-border-radius);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link .vs-sidebar-nav-link-name {
    color: var(--vs-primary-font-color);
    font-weight: var(--vs-font-weight-500);
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active:before{
    display: block;    
    border-radius: var(--vs-border-radius) 0 0 var(--vs-border-radius);
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(26%) sepia(85%) saturate(2266%) hue-rotate(339deg) brightness(78%) contrast(102%);
}
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(26%) sepia(85%) saturate(2266%) hue-rotate(339deg) brightness(78%) contrast(102%);
}
/* ---- Menu Hover State CSS Start ---- */
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
  background-color: var(--vs-primary-light-color); 
  position: var(--vs-position-relative);  
  border-radius: var(--vs-border-radius);
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active:before{
    display: block;    
    border-radius: var(--vs-border-radius) 0 0 var(--vs-border-radius);
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(26%) sepia(85%) saturate(2266%) hue-rotate(339deg) brightness(78%) contrast(102%);
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(26%) sepia(85%) saturate(2266%) hue-rotate(339deg) brightness(78%) contrast(102%);
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link:hover{
    background: var(--vs-transparent-background-color);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown.vs-no-submenu .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link .vs-sidebar-nav-link-name{
    color: var(--vs-primary-font-color);
}
/* ---- Sidebar No Submenu CSS Start ---- */

.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
   border-radius: 0.25rem;
}
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active{
   border-radius: 0.25rem;
} 
 
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link .vs-sidebar-nav-link-name{
    color: var(--vs-primary-font-color);
    font-weight: var(--vs-font-weight-500);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active .card-link.vs-sidebar-nav-dropdown-card-link:after{
   color: var(--vs-regular-font-color)!important; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover .card-link.vs-sidebar-nav-dropdown-card-link:after{
   color: var(--vs-regular-font-color)!important; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link{
  float: var(--vs-float-left);  
  width: 100%;  
  margin: 0rem; 
  padding:0.625rem 1.8rem; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link:hover{
    background: var(--vs-sidebar-nav-dropdown-card-header-active-background-color);
    border-radius: 0.25rem;
}


.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link{
    padding:0.625rem 0.938rem!important;
}

.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link{
    padding:0.625rem 0.938rem!important;
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon{
  float: var(--vs-float-left);
  width: 1.125rem;
  height: 1.25rem;
  margin: 0rem;
  padding: 0rem;
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.header-active a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(22%) sepia(85%) saturate(2673%) hue-rotate(342deg) brightness(81%) contrast(94%);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header:hover a.card-link.vs-sidebar-nav-dropdown-card-link img.vs-sidebar-nav-link-icon {
filter: invert(22%) sepia(85%) saturate(2673%) hue-rotate(342deg) brightness(81%) contrast(94%);
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header a.card-link.vs-sidebar-nav-dropdown-card-link .vs-sidebar-nav-link-name{
  float: var(--vs-float-left);   
  margin: 0rem; 
  padding:0 0 0 1rem;
  font-size: var(--vs-font-size-15);
  line-height: var(--vs-font-line-height-20);
  font-weight: var(--vs-font-weight-400);
  color: var(--vs-regular-font-color);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header[aria-expanded="true"] .card-link.vs-sidebar-nav-dropdown-card-link:after {
  float: var(--vs-float-right);
  content: "\f106";
  font-family: 'FontAwesome';
  font-size: var(--vs-font-size-18);
  line-height: var(--vs-font-line-height-18);
  font-weight: var(--vs-font-weight-100);
  color: var(--vs-regular-font-color);
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-header.vs-sidebar-nav-dropdown-card-header.collapsed .card-link.vs-sidebar-nav-dropdown-card-link:after {
  float: var(--vs-float-right);
  content: "\f107";
  font-family: 'FontAwesome';
  font-size: var(--vs-font-size-18);
  line-height: var(--vs-font-line-height-18);
  font-weight: var(--vs-font-weight-100);
  color: var(--vs-regular-font-color); 
} 


.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body{
  float: var(--vs-float-left);  
  width: 100%;  
  margin: 0; 
  padding:0rem; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul{
  float: var(--vs-float-left);  
  width: 100%;  
  margin: 0rem; 
  padding:0rem; 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li{
  float: var(--vs-float-left);  
  width: 100%;  
  margin: 0.75rem 0 0 0; 
  padding:0rem; 
  list-style-type: none;  
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li:hover a{
    color: var(--vs-primary-color)!important;
} 
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li.nav-active{
  background-color: var(--vs-primary-light-color); 
  position: var(--vs-position-relative);  
  border-radius: 0.25rem;
} 
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li.nav-active:before{
    content: '';
    position: var(--vs-position-absolute);
    height: 100%;
    width: 0.313rem;
    background: var(--vs-primary-color);
    left: 0rem;
    top: 0rem; 
    border-radius: 0rem;
} 
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li.nav-active:before{
  border-radius: 0.25rem 0 0 0.25rem;
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li.nav-active a{
    color: var(--vs-primary-color);
    font-weight: var(--vs-font-weight-500); 
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li.nav-active a img {
filter: invert(21%) sepia(60%) saturate(4269%) hue-rotate(345deg) brightness(82%) contrast(90%);
}

.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li:hover a img {
filter: invert(21%) sepia(60%) saturate(4269%) hue-rotate(345deg) brightness(82%) contrast(90%);
}


.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li a{
  float: var(--vs-float-left);  
  width: 100%; 
  margin: 0rem; 
  padding:0.5rem 1rem;
  font-size: var(--vs-font-size-15);
  line-height: var(--vs-font-line-height-18);
  font-weight: var(--vs-font-weight-400);
  color: var(--vs-regular-font-color); 
}
.vs-sidebar-menu .vs-sidebar-nav .vs-sidebar-nav-container .vs-sidebar-nav-list .vs-sidebar-nav-items .vs-sidebar-nav-dropdown .card.vs-sidebar-nav-dropdown-card .card-body.vs-sidebar-nav-dropdown-card-body ul li a img{
  float: var(--vs-float-left);   
  width: 1rem; 
  margin: 0.5rem 1rem 0 0; 
  padding:0rem; 
}      
.vs-sidebar-nav-link-name,
.vs-sidebar-nav-dropdown-card-body, 
.card-link.vs-sidebar-nav-dropdown-card-link:after,
.vs-sidebar-nav-header-info, 
.vs-sidebar-nav-link-dropdown-icon {
    display: none;
    transition: .3s;
}    
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-header-info-icon {
    display: none;
  } 
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-header-info {
    display: inline-block;
  }
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-link-name {
    display: inline-block;
  }
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-dropdown-card-body {
    display: inline-block;
  }
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .card-link.vs-sidebar-nav-dropdown-card-link:after {
    display: inline-block;
  }
.vs-sidebar-menu .vs-sidebar-nav.vs-sidebar-menu-expanded .vs-sidebar-nav-link-dropdown-icon {
    display: inline-block;
}   
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-header-info-icon {
    display: none;
    transition: .3s;
  } 
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-header-info {
    display: inline-block;
    transition: .3s;
  }
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-link-name {
    display: inline-block;
    transition: .3s;
  }
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-dropdown-card-body {
    display: inline-block;
    transition: .3s;
  }
.vs-sidebar-menu .vs-sidebar-nav:hover .card-link.vs-sidebar-nav-dropdown-card-link:after {
    display: inline-block;
    transition: .3s;
  }
.vs-sidebar-menu .vs-sidebar-nav:hover .vs-sidebar-nav-link-dropdown-icon {
    display: inline-block;
    transition: .3s;
}

/* Page Action Dropdown Menu */
.vs-page-action-menu-section{ 
    margin: 0rem;
    padding: 0rem;
    position: fixed;
    top: 10rem;
    right: 0;
    left: auto;
}

.vs-page-action-menu-section .vs-page-action-menu-button{
    float: var(--vs-float-right);
    margin: 0rem;
    padding: 0.75rem 0.625rem 0.75rem 0.75rem;
    border: 0;
    background: var(--vs-primary-color);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: var(--vs-border-radius) 0 0 var(--vs-border-radius);
}
.vs-page-action-menu-section .vs-page-action-menu-button img{
    float: var(--vs-float-left);
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0; 
}
.vs-table-action-dropdown-menu.dropleft .vs-page-action-menu-button.dropdown-toggle::before{display: none;}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu{
    float: var(--vs-float-left); 
    min-width: 32.5rem!important;
    padding:0.625rem 1.25rem!important;
    margin: 0rem!important;
    border: 0!important;
    background: var(--vs-table-action-dropdown-menu-background-color)!important;
    border-radius: var(--vs-border-radius)!important;
    box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.06)!important;
/*    box-shadow: 0px 0px 1500px 1500px rgba(0, 0, 0, 0.4)!important;*/
    z-index: 9999;
    left: -0.5rem!important;
    height: 430px;
    overflow: auto;
} 
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu .vs-action-btn{
    padding: 1.5rem;
    background: #F8F8F8;
    border: 0.188rem solid transparent;    
    border-radius: var(--vs-border-radius); 
}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu a:hover .vs-action-btn{
    background: var(--vs-primary-light-color);
    border: 0.188rem solid rgba(200, 213, 247, 1);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu a:hover .text{
    color: var(--vs-primary-font-color);
}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu a:hover .img img{
    filter: invert(26%) sepia(92%) saturate(2265%) hue-rotate(220deg) brightness(95%) contrast(112%);
}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu .vs-action-btn .img img{
    width:1.375rem;
    height:1.375rem; 
    margin: 0 0 0.625rem 0;
    padding: 0;
}
.vs-page-action-menu-section .dropdown-menu.vs-page-action-dropdown-menu .vs-action-btn .text{
    font-size: var(--vs-font-size-15); 
    color: var(--vs-secondary-font-color);
    font-weight: var(--vs-font-weight-500);
    margin: 0;
    padding: 0;
}
 

/* Floats */
.vs-float-left {
    float: var( --vs-float-left)!important;
}
.vs-float-right {
    float: var(--vs-float-right)!important;
}
.vs-float-none {
    float: var( --vs-float-none)!important;
}
.vs-float-inherit {
    float: var( --vs-float-inherit)!important;
}

/* Whidth */
.vs-width-full {
    width: var(--vs-width-full)!important;
}
.vs-width-full-none {
    width: var(--vs-width-full-none)!important;
}
.vs-width-half {
    width: var(--vs-width-half)!important;
}
.vs-width-half-none {
    width: var(--vs-width-half-none)!important;
}

/*Background Colors Commons*/
.vs-body-background-color {
    background: var(--vs-body-background-color)!important;
}
.vs-white-background-color {
    background: var(--vs-white-background-color)!important;
}
.vs-transparent-background-color {
    background: var(--vs-transparent-background-color)!important;
}
.vs-primary-background-color {
    background: var(--vs-primary-color)!important;
}
.vs-primary-dark-background-color {
    background: var(--vs-primary-dark-color)!important;
}
.vs-primary-light-background-color {
    background: var(--vs-primary-light-color)!important;
}
.vs-secondary-background-color {
    background: var(--vs-secondary-color)!important;
} 
.vs-secondary-light-background-color {
    background: var(--vs-secondary-light-color)!important;
} 
.vs-secondary-very-light-background-color {
    background: var(--vs-secondary-very-light-color)!important;
}  


/* Box Shadow */
.vs-box-shadow-none {
    box-shadow: inherit!important;
}

/* Border */
.vs-border-0 {
    border: 0rem!important;
}

.vs-border {
    border: 0.063rem solid var(--vs-border-color)!important;
}

.vs-border-top {
    border-top: 0.063rem solid var(--vs-border-color)!important;
}

.vs-border-bottom {
    border-bottom: 0.063rem solid var(--vs-border-color)!important;
}

.vs-border-right {
    border-right: 0.063rem solid var(--vs-border-color)!important;
}

.vs-border-left {
    border-left: 0.063rem solid var(--vs-border-color)!important;
}

/*Position*/
.vs-position-relative {
    position: var(--vs-position-relative);
}
.vs-position-absolute {
    position: var(--vs-position-absolute);
}
.vs-position-fixed {
    position: var(--vs-position-fixed);
}
.vs-position-static {
    position: var(--vs-position-static);
}
.vs-position-sticky {
    position: var(--vs-position-sticky);
}
.vs-position-none {
    position: var(--vs-position-none);
}

/* Padding */
.vs-padding-all-0 {
    padding: var(--vs-padding-0)!important;
}
.vs-padding-all-2 {
    padding: var(--vs-padding-2)!important;
}
.vs-padding-all-5 {
    padding: var(--vs-padding-5)!important;
}
.vs-padding-all-10 {
    padding: var(--vs-padding-10)!important;
}
.vs-padding-all-15 {
    padding: var(--vs-padding-15)!important;
}
.vs-padding-all-20 {
    padding: var(--vs-padding-20)!important;
}
.vs-padding-all-25 {
    padding: var(--vs-padding-25)!important;
}
.vs-padding-all-30 {
    padding: var(--vs-padding-30)!important;
}
.vs-padding-all-35 {
    padding: var(--vs-padding-35)!important;
}
.vs-padding-all-40 {
    padding: var(--vs-padding-40)!important;
}
.vs-padding-all-45 {
    padding: var(--vs-padding-45)!important;
}
.vs-padding-all-50 {
    padding: var(--vs-padding-50)!important;
}
.vs-padding-top-0 {
    padding-top: var(--vs-padding-0)!important;
}
.vs-padding-top-2 {
    padding-top: var(--vs-padding-2)!important;
}
.vs-padding-top-5 {
    padding-top: var(--vs-padding-5)!important;
}
.vs-padding-top-10 {
    padding-top: var(--vs-padding-10)!important;
}
.vs-padding-top-15 {
    padding-top: var(--vs-padding-15)!important;
}
.vs-padding-top-20 {
    padding-top: var(--vs-padding-20)!important;
}
.vs-padding-top-25 {
    padding-top: var(--vs-padding-25)!important;
}
.vs-padding-top-30 {
    padding-top: var(--vs-padding-30)!important;
}
.vs-padding-top-35 {
    padding-top: var(--vs-padding-35)!important;
}
.vs-padding-top-40 {
    padding-top: var(--vs-padding-40)!important;
}
.vs-padding-top-45 {
    padding-top: var(--vs-padding-45)!important;
}
.vs-padding-top-50 {
    padding-top: var(--vs-padding-50)!important;
}
.vs-padding-right-0 {
    padding-right: var(--vs-padding-0)!important;
}
.vs-padding-right-2 {
    padding-right: var(--vs-padding-2)!important;
}
.vs-padding-right-5 {
    padding-right: var(--vs-padding-5)!important;
}
.vs-padding-right-10 {
    padding-right: var(--vs-padding-10)!important;
}
.vs-padding-right-15 {
    padding-right: var(--vs-padding-15)!important;
}
.vs-padding-right-20 {
    padding-right: var(--vs-padding-20)!important;
}
.vs-padding-right-25 {
    padding-right: var(--vs-padding-25)!important;
}
.vs-padding-right-30 {
    padding-right: var(--vs-padding-30)!important;
}
.vs-padding-right-35 {
    padding-right: var(--vs-padding-35)!important;
}
.vs-padding-right-40 {
    padding-right: var(--vs-padding-40)!important;
}
.vs-padding-right-45 {
    padding-right: var(--vs-padding-45)!important;
}
.vs-padding-right-50 {
    padding-right: var(--vs-padding-50)!important;
}
.vs-padding-bottom-0 {
    padding-bottom: var(--vs-padding-0)!important;
}
.vs-padding-bottom-2 {
    padding-bottom: var(--vs-padding-2)!important;
}
.vs-padding-bottom-5 {
    padding-bottom: var(--vs-padding-5)!important;
}
.vs-padding-bottom-10 {
    padding-bottom: var(--vs-padding-10)!important;
}
.vs-padding-bottom-15 {
    padding-bottom: var(--vs-padding-15)!important;
}
.vs-padding-bottom-20 {
    padding-bottom: var(--vs-padding-20)!important;
}
.vs-padding-bottom-25 {
    padding-bottom: var(--vs-padding-25)!important;
}
.vs-padding-bottom-30 {
    padding-bottom: var(--vs-padding-30)!important;
}
.vs-padding-bottom-35 {
    padding-bottom: var(--vs-padding-35)!important;
}
.vs-padding-bottom-40 {
    padding-bottom: var(--vs-padding-40)!important;
}
.vs-padding-bottom-45 {
    padding-bottom: var(--vs-padding-45)!important;
}
.vs-padding-bottom-50 {
    padding-bottom: var(--vs-padding-50)!important;
}
.vs-padding-left-0 {
    padding-left: var(--vs-padding-0)!important;
}
.vs-padding-left-2 {
    padding-left: var(--vs-padding-2)!important;
}
.vs-padding-left-5 {
    padding-left: var(--vs-padding-5)!important;
}
.vs-padding-left-10 {
    padding-left: var(--vs-padding-10)!important;
}
.vs-padding-left-15 {
    padding-left: var(--vs-padding-15)!important;
}
.vs-padding-left-20 {
    padding-left: var(--vs-padding-20)!important;
}
.vs-padding-left-25 {
    padding-left: var(--vs-padding-25)!important;
}
.vs-padding-left-30 {
    padding-left: var(--vs-padding-30)!important;
}
.vs-padding-left-35 {
    padding-left: var(--vs-padding-35)!important;
}
.vs-padding-left-40 {
    padding-left: var(--vs-padding-40)!important;
}
.vs-padding-left-45 {
    padding-left: var(--vs-padding-45)!important;
}
.vs-padding-left-50 {
    padding-left: var(--vs-padding-50)!important;
}
.vs-padding-left-right-0 {
    padding-left: var(--vs-padding-0)!important;
    padding-right: var(--vs-padding-0)!important;
}
.vs-padding-left-right-2 {
    padding-left: var(--vs-padding-2)!important;
    padding-right: var(--vs-padding-2)!important;
}
.vs-padding-left-right-5 {
    padding-left: var(--vs-padding-5)!important;
    padding-right: var(--vs-padding-5)!important;
}
.vs-padding-left-right-10 {
    padding-left: var(--vs-padding-10)!important;
    padding-right: var(--vs-padding-10)!important;
}
.vs-padding-left-right-15 {
    padding-left: var(--vs-padding-15)!important;
    padding-right: var(--vs-padding-15)!important;
}
.vs-padding-left-right-20 {
    padding-left: var(--vs-padding-20)!important;
    padding-right: var(--vs-padding-20)!important;
}
.vs-padding-left-right-25 {
    padding-left: var(--vs-padding-25)!important;
    padding-right: var(--vs-padding-25)!important;
}
.vs-padding-left-right-30 {
    padding-left: var(--vs-padding-30)!important;
    padding-right: var(--vs-padding-30)!important;
}
.vs-padding-left-right-35 {
    padding-left: var(--vs-padding-35)!important;
    padding-right: var(--vs-padding-35)!important;
}
.vs-padding-left-right-40 {
    padding-left: var(--vs-padding-40)!important;
    padding-right: var(--vs-padding-40)!important;
}
.vs-padding-left-right-45 {
    padding-left: var(--vs-padding-45)!important;
    padding-right: var(--vs-padding-45)!important;
}
.vs-padding-left-right-50 {
    padding-left: var(--vs-padding-50)!important;
    padding-right: var(--vs-padding-50)!important;
}
.vs-padding-top-bottom-0 {
    padding-top: var(--vs-padding-0)!important;
    padding-botoom: var(--vs-padding-0)!important;
}
.vs-padding-top-bottom-2 {
    padding-top: var(--vs-padding-2)!important;
    padding-botoom: var(--vs-padding-2)!important;
}
.vs-padding-top-bottom-5 {
    padding-top: var(--vs-padding-5)!important;
    padding-botoom: var(--vs-padding-5)!important;
}
.vs-padding-top-bottom-10 {
    padding-top: var(--vs-padding-10)!important;
    padding-botoom: var(--vs-padding-10)!important;
}
.vs-padding-top-bottom-15 {
    padding-top: var(--vs-padding-15)!important;
    padding-botoom: var(--vs-padding-15)!important;
}
.vs-padding-top-bottom-20 {
    padding-top: var(--vs-padding-20)!important;
    padding-botoom: var(--vs-padding-20)!important;
}
.vs-padding-top-bottom-25 {
    padding-top: var(--vs-padding-25)!important;
    padding-botoom: var(--vs-padding-25)!important;
}
.vs-padding-top-bottom-30 {
    padding-top: var(--vs-padding-30)!important;
    padding-botoom: var(--vs-padding-30)!important;
}
.vs-padding-top-bottom-35 {
    padding-top: var(--vs-padding-35)!important;
    padding-botoom: var(--vs-padding-35)!important;
}
.vs-padding-top-bottom-40 {
    padding-top: var(--vs-padding-40)!important;
    padding-botoom: var(--vs-padding-40)!important;
}
.vs-padding-top-bottom-45 {
    padding-top: var(--vs-padding-45)!important;
    padding-botoom: var(--vs-padding-45)!important;
}
.vs-padding-top-bottom-50 {
    padding-top: var(--vs-padding-50)!important;
    padding-botoom: var(--vs-padding-50)!important;
}

/* Margin */
.vs-margin-all-0 {
    margin: var(--vs-margin-0)!important;
}
.vs-margin-all-2 {
    margin: var(--vs-margin-2)!important;
}
.vs-margin-all-5 {
    margin: var(--vs-margin-5)!important;
}
.vs-margin-all-10 {
    margin: var(--vs-margin-10)!important;
}
.vs-margin-all-15 {
    margin: var(--vs-margin-15)!important;
}
.vs-margin-all-20 {
    margin: var(--vs-margin-20)!important;
}
.vs-margin-all-25 {
    margin: var(--vs-margin-25)!important;
}
.vs-margin-all-30 {
    margin: var(--vs-margin-30)!important;
}
.vs-margin-all-35 {
    margin: var(--vs-margin-35)!important;
}
.vs-margin-all-40 {
    margin: var(--vs-margin-40)!important;
}
.vs-margin-all-45 {
    margin: var(--vs-margin-45)!important;
}
.vs-margin-all-50 {
    margin: var(--vs-margin-50)!important;
}
.vs-margin-top-0 {
    margin-top: var(--vs-margin-0)!important;
}
.vs-margin-top-2 {
    margin-top: var(--vs-margin-2)!important;
}
.vs-margin-top-5 {
    margin-top: var(--vs-margin-5)!important;
}
.vs-margin-top-10 {
    margin-top: var(--vs-margin-10)!important;
}
.vs-margin-top-15 {
    margin-top: var(--vs-margin-15)!important;
}
.vs-margin-top-20 {
    margin-top: var(--vs-margin-20)!important;
}
.vs-margin-top-25 {
    margin-top: var(--vs-margin-25)!important;
}
.vs-margin-top-30 {
    margin-top: var(--vs-margin-30)!important;
}
.vs-margin-top-35 {
    margin-top: var(--vs-margin-35)!important;
}
.vs-margin-top-40 {
    margin-top: var(--vs-margin-40)!important;
}
.vs-margin-top-45 {
    margin-top: var(--vs-margin-45)!important;
}
.vs-margin-top-50 {
    margin-top: var(--vs-margin-50)!important;
}
.vs-margin-top-55 {
    margin-top: var(--vs-margin-55)!important;
}
.vs-margin-top-60 {
    margin-top: var(--vs-margin-60)!important;
}
.vs-margin-top-65 {
    margin-top: var(--vs-margin-65)!important;
}
.vs-margin-top-70 {
    margin-top: var(--vs-margin-70)!important;
}
.vs-margin-top-75 {
    margin-top: var(--vs-margin-75)!important;
}
.vs-margin-top-80 {
    margin-top: var(--vs-margin-80)!important;
}
.vs-margin-right-0 {
    margin-right: var(--vs-margin-0)!important;
}
.vs-margin-right-2 {
    margin-right: var(--vs-margin-2)!important;
}
.vs-margin-right-5 {
    margin-right: var(--vs-margin-5)!important;
}
.vs-margin-right-10 {
    margin-right: var(--vs-margin-10)!important;
}
.vs-margin-right-15 {
    margin-right: var(--vs-margin-15)!important;
}
.vs-margin-right-20 {
    margin-right: var(--vs-margin-20)!important;
}
.vs-margin-right-25 {
    margin-right: var(--vs-margin-25)!important;
}
.vs-margin-right-30 {
    margin-right: var(--vs-margin-30)!important;
}
.vs-margin-right-35 {
    margin-right: var(--vs-margin-35)!important;
}
.vs-margin-right-40 {
    margin-right: var(--vs-margin-40)!important;
}
.vs-margin-right-45 {
    margin-right: var(--vs-margin-45)!important;
}
.vs-margin-right-50 {
    margin-right: var(--vs-margin-50)!important;
}
.vs-margin-bottom-0 {
    margin-bottom: var(--vs-margin-0)!important;
}
.vs-margin-bottom-2 {
    margin-bottom: var(--vs-margin-2)!important;
}
.vs-margin-bottom-5 {
    margin-bottom: var(--vs-margin-5)!important;
}
.vs-margin-bottom-10 {
    margin-bottom: var(--vs-margin-10)!important;
}
.vs-margin-bottom-15 {
    margin-bottom: var(--vs-margin-15)!important;
}
.vs-margin-bottom-20 {
    margin-bottom: var(--vs-margin-20)!important;
}
.vs-margin-bottom-25 {
    margin-bottom: var(--vs-margin-25)!important;
}
.vs-margin-bottom-30 {
    margin-bottom: var(--vs-margin-30)!important;
}
.vs-margin-bottom-35 {
    margin-bottom: var(--vs-margin-35)!important;
}
.vs-margin-bottom-40 {
    margin-bottom: var(--vs-margin-40)!important;
}
.vs-margin-bottom-45 {
    margin-bottom: var(--vs-margin-45)!important;
}
.vs-margin-bottom-50 {
    margin-bottom: var(--vs-margin-50)!important;
}
.vs-margin-left-0 {
    margin-left: var(--vs-margin-0)!important;
}
.vs-margin-left-2 {
    margin-left: var(--vs-margin-2)!important;
}
.vs-margin-left-5 {
    margin-left: var(--vs-margin-5)!important;
}
.vs-margin-left-10 {
    margin-left: var(--vs-margin-10)!important;
}
.vs-margin-left-15 {
    margin-left: var(--vs-margin-15)!important;
}
.vs-margin-left-20 {
    margin-left: var(--vs-margin-20)!important;
}
.vs-margin-left-25 {
    margin-left: var(--vs-margin-25)!important;
}
.vs-margin-left-30 {
    margin-left: var(--vs-margin-30)!important;
}
.vs-margin-left-35 {
    margin-left: var(--vs-margin-35)!important;
}
.vs-margin-left-40 {
    margin-left: var(--vs-margin-40)!important;
}
.vs-margin-left-45 {
    margin-left: var(--vs-margin-45)!important;
}
.vs-margin-left-50 {
    margin-left: var(--vs-margin-50)!important;
}
.vs-margin-left-right-0 {
    margin-left: var(--vs-margin-0)!important;
    margin-right: var(--vs-margin-0)!important;
}
.vs-margin-left-right-5 {
    margin-left: var(--vs-margin-5)!important;
    margin-right: var(--vs-margin-5)!important;
}
.vs-margin-left-right-2 {
    margin-left: var(--vs-margin-2)!important;
    margin-right: var(--vs-margin-2)!important;
}
.vs-margin-left-right-10 {
    margin-left: var(--vs-margin-10)!important;
    margin-right: var(--vs-margin-10)!important;
}
.vs-margin-left-right-15 {
    margin-left: var(--vs-margin-15)!important;
    margin-right: var(--vs-margin-15)!important;
}
.vs-margin-left-right-20 {
    margin-left: var(--vs-margin-20)!important;
    margin-right: var(--vs-margin-20)!important;
}
.vs-margin-left-right-25 {
    margin-left: var(--vs-margin-25)!important;
    margin-right: var(--vs-margin-25)!important;
}
.vs-margin-left-right-30 {
    margin-left: var(--vs-margin-30)!important;
    margin-right: var(--vs-margin-30)!important;
}
.vs-margin-left-right-35 {
    margin-left: var(--vs-margin-35)!important;
    margin-right: var(--vs-margin-35)!important;
}
.vs-margin-left-right-40 {
    margin-left: var(--vs-margin-40)!important;
    margin-right: var(--vs-margin-40)!important;
}
.vs-margin-left-right-45 {
    margin-left: var(--vs-margin-45)!important;
    margin-right: var(--vs-margin-45)!important;
}
.vs-margin-left-right-50 {
    margin-left: var(--vs-margin-50)!important;
    margin-right: var(--vs-margin-50)!important;
}
.vs-margin-top-bottom-0 {
    margin-top: var(--vs-margin-0)!important;
    margin-bottom: var(--vs-margin-0)!important;
}
.vs-margin-top-bottom-2 {
    margin-top: var(--vs-margin-2)!important;
    margin-bottom: var(--vs-margin-2)!important;
}
.vs-margin-top-bottom-5 {
    margin-top: var(--vs-margin-5)!important;
    margin-bottom: var(--vs-margin-5)!important;
}
.vs-margin-top-bottom-10 {
    margin-top: var(--vs-margin-10)!important;
    margin-bottom: var(--vs-margin-10)!important;
}
.vs-margin-top-bottom-15 {
    margin-top: var(--vs-margin-15)!important;
    margin-bottom: var(--vs-margin-15)!important;
}
.vs-margin-top-bottom-20 {
    margin-top: var(--vs-margin-20)!important;
    margin-bottom: var(--vs-margin-20)!important;
}
.vs-margin-top-bottom-25 {
    margin-top: var(--vs-margin-25)!important;
    margin-bottom: var(--vs-margin-25)!important;
}
.vs-margin-top-bottom-30 {
    margin-top: var(--vs-margin-30)!important;
    margin-bottom: var(--vs-margin-30)!important;
}
.vs-margin-top-bottom-35 {
    margin-top: var(--vs-margin-35)!important;
    margin-bottom: var(--vs-margin-35)!important;
}
.vs-margin-top-bottom-40 {
    margin-top: var(--vs-margin-40)!important;
    margin-bottom: var(--vs-margin-40)!important;
}
.vs-margin-top-bottom-45 {
    margin-top: var(--vs-margin-45)!important;
    margin-bottom: var(--vs-margin-45)!important;
}
.vs-margin-top-bottom-50 {
    margin-top: var(--vs-margin-50)!important;
    margin-bottom: var(--vs-margin-50)!important;
}

/*Add Customer Components Action Button*/
.vs-add-customer-action-button {
    padding: 0.5rem 0.625rem;
    margin: 0.0rem;
    font-size: var(--vs-font-size-15);
    font-weight: var(--vs-font-weight-500);
    color: var(--vs-secondary-button-font-color);
}
.vs-add-customer-action-button:hover  {
    color: var(--vs-secondary-button-hover-font-color);    
    cursor: pointer;
}
.vs-add-customer-action-button:focus {
    box-shadow: var(--vs-button-box-shadow);
    background: var(--vs-secondary-button-hover-background-color);
    color: var(--vs-secondary-button-hover-font-color);   
}

/* Stickey footer */
.footer-sticky {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

.min-max-height-auto {
    min-height: 100%;
}