/* You can add global styles to this file, and also import other style files */

/* @import url(//db.onlinewebfonts.com/c/ef6bdf5ef216552c7e9869841e891ca0?family=Arial+Rounded+MT+Bold); */

/* body { */

/* font-family: "Roboto", sans-serif; */

/* } */

:root {
    --bg-color: #f0f4f9;
    --text-dark: #000000;
    --light-color: #ffffff;
    --dark-color: #000000;
    --selected-input: rgba(0, 0, 0, 0.4);
    --selected-border: rgb(0 0 0 / 0%);
    /* --gray-color: #dadada; */
    /* added by piyush */
    /* --h-text-color:white; */
    --h-text-color: black;
    /* added by piyush */
    --color: #000000;
    --selected-color: #102f59;
    /* #ff4a56;*/
    --bg-selected-color: var(--selected-color);
    --border-color: #dadada;
    --border-selected-color: var(--selected-color);
    --label-color: var(--color);
    --label-selected-color: var(--selected-color);
    --side-menubar-width: 100px;
    --header-height: 50px;
    --solid-color: rgba(255, 0, 0, 1);
    /* rgba(207, 0, 0, 1);*/
    --right-panel-width: 40px;
    --right-panel-content-right: 300px;
    --ns-logo-size: 80px;
    --s-form-width: 600px;
    --view-width: 0px;
    --view-col-width: 0px;
    --content-width: 0px;
    --form-width: 0px;
    --form-col-width: 0px;
    --dash-col-width: 400px;
    --height: 0px;
    --sidebar-width: 0px;
    --separator: 1px solid rgba(0, 0, 0, .2);
    --tbl-rowmore-height: 50px;
    --tbl-header-height: 100px;
    --reprt-detail-height: 50px;
    --tbl-row-width: 0px;
    --tbl-temp-width: 0px;
    --tbl-body-width: 0px;
    --tbl-header-row-Width: 0px;
    --top-actionPenal-height: 37px;
    --transition: 0.2s;
    --view-header-height: 40px;
    --view-top-actionPenal-height: 37px;
    --view-tbl-row-width: 0px;
    /*     --mm-bg: #d5d6e0; */
    --mm-bg: var(--q-h-bg-color);
    --mm-txt: #8097d6;
    /*  --btn-btn-h: #62608b; */
    --btn-btn-h: var(--q-bg-color);
    --btn-txt-h: #ffffff;
    /* --q-bg-color: #8097d6; */
    /* --q-bg-color: #00a09d; */
    /* added by piyush */
    /* --q-bg-color: #00a09d; */
    /* added by piyush */
    --q-bg-color: var(--bg-color);
    --q-bdr: 1px solid var(--border-color);
    --q-bdr-radius: 10px;

    /* added by piyush */
    /* added by piyush */
    /* 101d94; */
    /* --q-h-bg-color: #f1f1f1; */
    --q-h-bg-color: #f3f3f9;
    --q-bg-transparent: #0000000d;
    --q-t-o-bg-color: var(--q-h-bg-color);
    --q-t-o-color: var(--q-bg-color);

    --q-t-bg-color: white;
    --q-t-color: #444b5a;
    --q-t-b-color: rgb(217 209 209);
    --q-stts-color: #868686;
    --q-stts-bg-color: #868686;

    --q-heading-color: #6d7080;
    --q-header-color: #495057;
    --q-success-color: #405189;
    --pop-bg: #0000002b;
    /* added by piyush */
    /* --menu-hover:#5eb3b2; */
    --menu-hover: #a9adb238;
    /* --submenu-hover:#03c1be0f; */
    --submenu-hover: #a9adb2;
    --submenu-border: #1902021f;
    --q-heading-color: #f0f4f942;
    --brdrds-6px: 6px;
    --q-margin: 0px 5px;
    --margin-print:5px;
    --padding-content: 5px 10px;
    --padding-table: 10px 30px;
    --padding-hrlbl: 12px 30px;
    --padding-input:10px 15px;
    /* added by piyush */

    /* transition */

    --transition-5s: .5s;
    --transition-3s: .3s;
    --transition-cubic-bezier: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* transition */
    /* global variable for bg text hover */
    --primary-color: #f0f4f9;
    --secondary-color: #1F1F1F;
    /* --primary-hover:#a9adb238; */
    --primary-hover: #E9E9E9;
    --text-white: #ffffff;
    --border-radius: 5px;
    --bg-grey: #f9f9f9;
    --view-mrgbttm: 20px;

    --padding-pl: 30px;
    /* global variable for bg text hover */

    /* status stepper colors */

    --status-primary: #0bc5e3;
    /* --status-light:#b9b5b54a; */
    --status-light: #b9b5b530;
    --status-success: #3ed4ed29;
    --status-red: #ff00005e;
    --title-color: #c67c3b;
    /* status stepper colors */


 /* -------------------------------------------------------------------------------------------------------------- */
--dark: #000000;
--light: #ffffff;
--transparent: rgb(0 0 0 / 0%);

/* danger */

--danger-100: #f87171;
--danger-200: #ef4444;
--danger-300: #FF0000;
--danger-400: #dc2626;

/* danger */


/* --warning */

--warning-100: #eaf678;
--warning-200: #d5cb05;
--warning-300: #f59e0b;
--warning-400: #d97706;
/* --warning */



/*--success */
--success-100: #4ade80;
--success-200: #22c55e;
--success-300: #16a34a;
--success-400: #15803d;
/*--success */


/*---grey----*/
/* hover---- */
--grey-40: #f3f3f3;
/* hover---- */

--grey-50: #f4f4f4;
--grey-100: #e3e3e3;
--grey-200: #dadada;
/* --grey-200: #d4dbe3; */
--grey-300: #bcc5cf;
--grey-400: #E9E9E9;
--grey-500: #7f8996;
--grey-700: #4b525c;
--grey-800: #f3f3f3;
--grey-900:  #1f1f1f;

/*---grey----*/


/* font-weight */

--font-weight-light:300;
--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;
/* font-weight */


/* font-size */

--fs-xs: 12px;
--fs-sm: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 20px;
--fs-3xl: 24px;

/* font-size */

/* border-radius */
--br-sm:5px;
--br-s:6px;
--br-m:10px;
--br-l:20px;
/* border-radius */

/* ----sidemenu-------------- */
--submenu-hover:var(--grey-50);
--menu-hover:var(--grey-100);
/* ----sidemenu-------------- */


/* -----Info----- */

--info-200: #bcccf0;
--info-300: #8fa8e4;
--info-400: #6277b8;
--info-500: #405189;
--info-600: #334170;
--info-700: #263258;

/* -----Info----- */
/* ------------------Global variable--------------------- */
--bg-primary: var(--grey-50);
--bg-secondary: var(--grey-900);
--bg-accent: var(--grey-50);
--primary-accent-hover:#f8fbff;
/* ------------------Global variable--------------------- */


/* -----------------------------table var css----------------------------- */

--table-bg: var(--light);
--table-header-bg: var(--bg-primary);
--table-hover-bg:var(--primary-accent-hover);
--table-hover-text:var(--info-400);
--table-border:var(--grey-200);
--table-text:var(--bg-secondary);
--table-header-shadow:var(--grey-200);
--table-text-weight:var(--font-weight-medium);
--table-border-style:1px solid var(--grey-200);
--table-header-padding:10px 15px 10px 10px;
--table-text-size:var(--fs-sm);
--table-header-spacing:30px;
--table-hover-muted:var(--light);
--table-row-spacing:30px;
--table-border-muted:1px solid var(--transparent);
--table-spacing-bottom:35px;
--table-form-spacing:17px;
--table-form-spacing-bottom:14px;
--table-radius:var(--br-m);

/*----------------------------- table var css----------------------------- */

/* button var css */

/* global button */
--btn-primary-bg:#2b7fff;
--btn-primary-light-bg:var(--light);
/* --btn-primary-hover-bg:var(--info-400); */
--btn-primary-hover-bg:#408bff;
--btn-primary-hover-text:#ffffff;
/* global button */
 
/* -------------filled------------- */
--btn-filled-bg:var(--btn-primary-bg);
--btn-filled-text:var(--bg-primary);
--btn-filled-border:1px solid var(--btn-primary-bg);
--btn-filled-hover-bg:var(--btn-primary-hover-bg);
--btn-filled-hover-text:var(--btn-primary-hover-text);
--btn-filled-hover-border:1px solid var(--btn-primary-hover-bg);
/* -------------filled------------- */

/* ----------------filled close reset--------------- */
--btn-filled-outlined-border:1px solid var(--btn-primary-hover-bg);
--btn-filled-outlined-bg:var(--btn-primary-light-bg);
--btn-filled-outlined-text:var(--btn-primary-hover-bg);
/*---------filled close reset --------------------*/

/* ----------------outlined-------------- */
--btn-outlined-border:1px solid var(--bg-secondary);
--btn-outlined-border-text:var(--bg-secondary);
--btn-outlined-bg:var(--btn-primary-light-bg);
/* ----------------outlined-------------- */


/*--------------------link------------------ */
--btn-text:var(--btn-primary-bg);
--btn-text-color:var(--bg-secondary);
--btn-bg: var(--btn-primary-light-bg);
--btn-bg-color:var(--bg-primary);
/* -------------------link------------------- */
/* Outline, Ouline + Background, Link, Primary, Secondary */

--btn-padding:8px 24px;
--btn-weight:var(--font-weight-normal);
--btn-transition:0.4s;
--btn-radius:var(--br-l);
/* button var css */



/* -----------------searchcontainer------------------------------- */

--searchbox-radius:var(--br-sm);
--searchbox-border:1px solid var(--grey-200);
--searchbox-size:var(--fs-lg);
--searchbox-input-size:var(--fs-md);
--searchbox-border-muted:none;
--globalsearch-radius:var(--br-s);

/* -----------------searchcontainer------------------------------- */



/* ----------------------------header section------------------------------------------- */

--header-padding:5px 20px;
--header-appname-size:var(--fs-md);
--header-appname-color:var(--bg-secondary);
--header-left-padding:5px 10px;
--header-search-spacing:20px;
--header-bg:var(--bg-primary);

/* ----------------------------header section------------------------------------------- */

/* ---------------------------body----------------------------------------------------- */
--body-bg-color:var(--light);
--body-radius:var(--br-m);
/* ---------------------------body----------------------------------------------------- */

}

.transition,
form button,
form .i-field label,
form .i-field .i-field-line,
form .i-field input[type="text"],
form .i-field textarea,
form .i-field input[type="password"],
.i-btn,
.i-search,
table .i-table,
tr,
tbody,
.i-menu,
.i-menu-item,
.i-menu-item>a,
.i-menu-title,
.i-menu-icon,
.i-submenu,
.i-dropmenu-content,
.i-menubar-content,
.i-header-dropmenu,
.i-header-dropmenu-content,
.side-menubar,
.side-menu,
.side-menu .side-menu-item a,
.side-menu-icon,
.side-menu-title {
    /*-moz-transition: all 0.35s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  -o-transition: all 0.35s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  -webkit-transition: all 0.35s cubic-bezier(0.53, 0.01, 0.35, 1.5);
  transition: all 0.35s cubic-bezier(0.53, 0.01, 0.35, 1.5);*/
    transition: all .285s ease-out;
}

* {
    /* font-family: "Roboto", sans-serif; */
    font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    ;
    /* -webkit-font-smoothing: antialiased; */
    margin: 0;
    padding: 0;
}

/* -------------------> */

.statustepper {
    margin-left: -40px;
    background-color: var(--q-bg-color);
    padding: 10px;
    /* border: 1px solid black; */
    clip-path: polygon(0 0, 70% 0%, 100% 50%, 70% 100%, 0 100%, 20% 50%);
}

/* -------------------> */

/* font-family: Arial, Helvetica, sans-serif; */

/* font-family: "Poppins", sans-serif; */

/* font-weight: lighter; */

.i-form {
    position: relative;
    display: inline-block;
    /*border: 1px solid var(--selected-color);*/
    padding: 25px 0 25px 25px;
}

.i-form h1 {
    color: var(--selected-color);
    /* #ff4a56;*/
    font-weight: 100;
    letter-spacing: 0.01em;
    margin: 0 0 0 0;
    text-transform: uppercase;
}

.i-form .i-field {
    position: relative;
    margin: 0px 25px;
    /* margin: 0 17px; */
}

/* added by piyush */

.i-form .inputcontainer {
    position: relative;
    /* margin: 0px 25px; */
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: transparent;
}

input::placeholder,
textarea::placeholder {
    color: transparent;
}

.inputcontainer label {
    transform-origin: left center;
    color: var(--label-color);
    padding-left: 18px;
    /* left: 41px; */
    top: 17px;
    letter-spacing: 0.01em;
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    /* top: 4px; */
    /* top:18px; */
    opacity: .8;
    transition: .15s ease-in-out;
    /* transition: .3s ease; */
}

.i-form .inputcontainer .i-field-error {
    color: var(--solid-color);
    font-size: 11px;
    padding-top: 3px;
}

.i-form .inputcontainer i~input {
    margin-top: 24px;
    /* padding-left: 40px; */
}

.i-form .inputcontainer input {
    background-color: var(--bg-color);
    outline: none;
    border: 1px solid #ced4da;
    font-size: 14px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    color: var(--color);
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    padding: 16px 18px;

}

.i-form .inputcontainer i {
    color: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 2;
    font-size: 16px;
    height: 100%;
    /* padding-left: 5px;
        display: flex;
        align-items: center; */
    padding: 17px 0px 0px 5px;
}

/* added by piyush */

.i-form .i-field:first-of-type {
    padding-top: 0;
}

.i-form .i-field:last-of-type {
    padding-bottom: 0;
}

.i-form .i-field label {
    transform-origin: left center;
    color: var(--label-color);
   
    letter-spacing: 0.01em;
    font-size: 14px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    /* top: 4px; */
    top: 18px;
    opacity: .8;
}

.i-form .i-field input[type="text"],
.i-form .i-field textarea,
.i-form .i-field input[type="date"],
.i-form .i-field input[type="time"],
.i-form .i-field input[type="password"],
.i-form .i-field select {
    /*appearance: none;*/
    background-color: var(--bg-color);
    outline: none;
    /* border: none; */
    border: 1px solid #ced4da;
    /* border-bottom: 1px solid var(--border-color); */
    /* #ff4a56;*/
    /*line-height: 0;*/
    font-size: 14px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    color: var(--color);
    /* #ff4a56;*/
    /* font-weight: 100; */
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    /* added by piyush */
    /* padding:10px; */
    padding: 16px 18px;
    /* padding: 0 0 4px 0; */

    /* added by piyush */
}

.i-form .i-field .i-field-line {
    width: 0;
    position: absolute;
    /* bottom: 0; */
    left: 0;
    content: "";
    box-sizing: border-box;
    background-color: var(--selected-color);
    will-change: width;
    transition: width .285s ease-out;
    z-index: 3;
    height: 2px;
}

/* .i-form .inputcontainer */

.i-form .i-field .i-field-error {
    color: var(--solid-color);
    font-size: 11px;
    padding-top: 3px;
}

.i-form .i-group-radio .i-field-error {
    color: var(--solid-color);
    font-size: 11px;
    padding-top: 3px;
}

.i-form .i-field .i-field-contain {
    color: green;
    text-transform: uppercase;
    /* color: var(--solid-color); */
    font-size: 11px;
    padding-top: 3px;
}

.i-form .i-field:focus-within:not(:-moz-read-only)>i {
    color: var(--label-selected-color);
}

.i-form .i-field:focus-within:not(:read-only)>i {
    color: var(--label-selected-color);
}

/* .i-form .i-field input[type="text"]:not(:read-only),
.i-form .i-field input[type="date"]:not(:read-only),
.i-form .i-field input[type="password"]:not(:read-only),
.i-form .i-field select:not(:read-only) {
    border-bottom: 1px solid var(--border-color);

} */

.i-form .i-field textarea {
    resize: none;
}

.i-form .i-field input[type="text"]:focus:not(:-moz-read-only)~.i-field-line, .i-form .i-field textarea:focus:not(:-moz-read-only)~.i-field-line, .i-form .i-field input[type="password"]:focus:not(:-moz-read-only)~.i-field-line, .i-form .i-field input[type="date"]:focus:not(:-moz-read-only)~.i-field-line, .i-form .i-field input[type="time"]:focus:not(:-moz-read-only)~.i-field-line, .i-form .i-field select:focus:not(:-moz-read-only)~.i-field-line {
    width: 100%;
}

.i-form .i-field input[type="text"]:focus:not(:read-only)~.i-field-line,
.i-form .i-field textarea:focus:not(:read-only)~.i-field-line,
.i-form .i-field input[type="password"]:focus:not(:read-only)~.i-field-line,
.i-form .i-field input[type="date"]:focus:not(:read-only)~.i-field-line,
.i-form .i-field input[type="time"]:focus:not(:read-only)~.i-field-line,
.i-form .i-field select:focus:not(:read-only)~.i-field-line {
    width: 100%;
}

.i-form .i-field input[type="text"]:focus:not(:-moz-read-only), .i-form .i-field textarea:focus:not(:-moz-read-only), .i-form .i-field input[type="password"]:focus:not(:-moz-read-only), .i-form .i-field input[type="date"]:focus:not(:-moz-read-only), .i-form .i-field input[type="time"]:focus:not(:-moz-read-only), .i-form .i-field select:focus:not(:-moz-read-only) {
    outline: none;
    color: var(--color);
    opacity: .7;
}

.i-form .i-field input[type="text"]:focus:not(:read-only),
.i-form .i-field textarea:focus:not(:read-only),
.i-form .i-field input[type="password"]:focus:not(:read-only),
.i-form .i-field input[type="date"]:focus:not(:read-only),
.i-form .i-field input[type="time"]:focus:not(:read-only),
.i-form .i-field select:focus:not(:read-only) {
    outline: none;
    color: var(--color);
    opacity: .7;
}

.i-form .i-field input[type="text"]:focus:not(:-moz-read-only)~label, .i-form .i-field textarea:focus:not(:-moz-read-only)~label, .i-form .i-field input[type="password"]:focus:not(:-moz-read-only)~label, .i-form .i-field input[type="date"]:focus:not(:-moz-read-only)~label, .i-form .i-field input[type="time"]:focus:not(:-moz-read-only)~label, .i-form .i-field select:focus:not(:-moz-read-only)~label {
    color: var(--label-selected-color);
    margin-top: -20px;
    opacity: 1;
    top: 0px;
    /* font-size: 11px; */
}

.i-form .i-field input[type="text"]:focus:not(:read-only)~label,
.i-form .i-field textarea:focus:not(:read-only)~label,
.i-form .i-field input[type="password"]:focus:not(:read-only)~label,
.i-form .i-field input[type="date"]:focus:not(:read-only)~label,
.i-form .i-field input[type="time"]:focus:not(:read-only)~label,
.i-form .i-field select:focus:not(:read-only)~label {
    color: var(--label-selected-color);
    margin-top: -20px;
    opacity: 1;
    top: 0px;
    /* font-size: 11px; */
}

.inputcontainer input:not(:-moz-placeholder-shown) ~ label

 {
    color: var(--label-selected-color);
    opacity: 1;
    top: 4px;
    font-size: 11px;
    padding-top: 3px;
    /* padding:24px 18px  7px; */


}

.inputcontainer input[type="text"]:focus:not(:-moz-read-only)~label, .inputcontainer input[type="password"]:focus:not(:-moz-read-only)~label

 {
    color: var(--label-selected-color);
    opacity: 1;
    top: 4px;
    font-size: 11px;
    padding-top: 3px;
    /* padding:24px 18px  7px; */


}

.inputcontainer input[type="text"]:focus:not(:read-only)~label,
.inputcontainer input[type="password"]:focus:not(:read-only)~label,
.inputcontainer input:not(:placeholder-shown) ~ label

 {
    color: var(--label-selected-color);
    opacity: 1;
    top: 4px;
    font-size: 11px;
    padding-top: 3px;
    /* padding:24px 18px  7px; */


}

.inputcontainer input:not(:-moz-placeholder-shown) {
    padding: 24px 18px 7px;
}

.inputcontainer input:not(:placeholder-shown) {
    padding: 24px 18px 7px;
}

.inputcontainer input:focus
 {
    /* box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); */
    /* border-radius: 5px; */
    outline: none;
    border-color: var(--secondary-color);
    padding:24px 18px  7px;

}

.inputcontainer input:focus:-moz-placeholder-shown {
    padding: 24px 18px 7px;
}

.inputcontainer input:focus:placeholder-shown {
    padding: 24px 18px 7px;
}

/* .inputcontainer input:focus{
} */

.i-form .i-field input[type="text"]:focus:-moz-read-only~label, .i-form .i-field textarea:focus:-moz-read-only~label, .i-form .i-field input[type="password"]:focus:-moz-read-only~label {
    margin-top: -23px;
}

.i-form .i-field input[type="text"]:focus:read-only~label,
.i-form .i-field textarea:focus:read-only~label,
.i-form .i-field input[type="password"]:focus:read-only~label,
.i-form .i-field input[type="date"]:focus~label,
.i-form .i-field input[type="time"]:focus~label,
.i-form .i-field select:focus~label {
    margin-top: -23px;
}

.i-form .i-field input[type="text"]:focus:not(.ng-valid):not(.ng-pristine)~label,
.i-form .i-field textarea:focus:not(.ng-valid):not(.ng-pristine)~label,
.i-form .i-field input[type="password"]:focus:not(.ng-valid):not(.ng-pristine)~label,
.i-form .i-field input[type="date"]:focus:not(.ng-valid):not(.ng-pristine)~label,
.i-form .i-field input[type="time"]:focus:not(.ng-valid):not(.ng-pristine)~label,
.i-form .i-field select:focus:not(.ng-valid):not(.ng-pristine)~label {
    color: var(--solid-color);
}

.i-form .i-field input[type="text"]:not(:-moz-placeholder-shown):not(:focus)~label, .i-form .i-field textarea:not(:-moz-placeholder-shown):not(:focus)~label, .i-form .i-field input[type="password"]:not(:-moz-placeholder-shown):not(:focus)~label, .i-form .i-field input[type="date"]:not(:-moz-placeholder-shown):not(:focus)~label, .i-form .i-field input[type="time"]:not(:-moz-placeholder-shown):not(:focus)~label, .i-form .i-field select:not(:-moz-placeholder-shown):not(:focus)~label {
    margin-top: -18px;
}

.i-form .i-field input[type="text"]:not(:placeholder-shown):not(:focus)~label,
.i-form .i-field textarea:not(:placeholder-shown):not(:focus)~label,
.i-form .i-field input[type="password"]:not(:placeholder-shown):not(:focus)~label,
.i-form .i-field input[type="date"]:not(:placeholder-shown):not(:focus)~label,
.i-form .i-field input[type="time"]:not(:placeholder-shown):not(:focus)~label,
.i-form .i-field select:not(:placeholder-shown):not(:focus)~label {
    margin-top: -18px;
}

.i-form .i-field input[type="text"]::-webkit-input-placeholder,
.i-form .i-field textarea::-webkit-input-placeholder,
.i-form .i-field input[type="password"]::-webkit-input-placeholder,
.i-form .i-field input[type="date"]::-webkit-input-placeholder,
.i-form .i-field input[type="time"]::-webkit-input-placeholder,
.i-form .i-field select::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}

.i-form .i-field input[type="text"]::-moz-placeholder,
.i-form .i-field textarea::-moz-placeholder,
.i-form .i-field input[type="password"]::-moz-placeholder,
.i-form .i-field input[type="date"]::-moz-placeholder,
.i-form .i-field input[type="time"]::-moz-placeholder,
.i-form .i-field select::-moz-placeholder {
    opacity: 0;
    -moz-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}

.i-form .i-field>i {
    color: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 2;
    font-size: 16px;
    height: 100%;
    /* color: var(--selected-color); */
}

.i-form .i-field i~input[type="text"],
.i-form .i-field i~input[type="password"],
.i-form .i-field i~label {
    padding-left: 40px;
    width: calc(100%);
}

.i-form .i-field i~input[type="text"],
.i-form .i-field i~input[type="password"] {
    margin-top: 24px;
    /* margin: 24px 0px; */
}

.i-form .i-field i+input[type="text"]:focus,
.i-form .i-field i+textarea:focus,
.i-form .i-field i+input[type="password"]:focus {
    color: var(--color);
}

.i-group {
    margin-top: 35px;
}

.footerbtn {
    border-radius: 5px;
    padding: 8px 16px;
    background-color: var(--secondary-color);
    color: var(--light-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.footerbtn span {
    color: var(--light-color);
    padding: 8px 2px;
}

.auth-outlet input{
    border-radius: 5px;
}

.linkcontainer{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.linkcontainer a{
    font-weight: 400;
    color: #0d6efd;
    text-decoration: underline;
    font-size: 14px;
    padding: 1px 6px;
margin-bottom:10px;
}

.i-form .i-radio [type="radio"]:not(:checked)+span:before,
.i-form .i-radio [type="radio"]:not(:checked)+span:after,
.i-form .i-radio [type="radio"]:checked+span:before,
.i-form .i-radio [type="radio"]:checked+span:after {
    border-radius: 50%;
}

.i-form .i-radio [type="radio"]:not(:checked)+span:before,
.i-form .i-radio [type="radio"]:not(:checked)+span:after {
    border: 2px solid var(--border-color);
}

.i-form .i-radio [type="radio"]:checked+span:after {
    border: 2px solid var(--selected-color);
}

.i-form .i-radio [type="radio"]:checked+span:after {
    border-radius: 50%;
    background-color: var(--selected-color);
}

.i-form .i-radio [type="radio"]:checked+span:after {
    left: 5px;
    top: -4px;
    transform: scale(.3);
}

.i-form .i-checkbox [type="checkbox"]:not(:checked),
.i-form .i-checkbox [type="checkbox"]:checked,
.i-form .i-radio [type="radio"]:not(:checked),
.i-form .i-radio [type="radio"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* .i-form .i-checkbox [type="checkbox"] {
checkbox aspect
} */

.i-form .i-checkbox [type="checkbox"]+span,
.i-form .i-radio [type="radio"]:not(:checked)+span,
.i-form .i-radio [type="radio"]:checked+span {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    width: inherit;
    line-height: 20px;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* .i-form
.i-form */

.i-checkbox [type="checkbox"]+span:before,
.i-checkbox [type="checkbox"]:not(.filled-in)+span:not(.lever):after,
[type="radio"]+span:before,
[type="radio"]+span:after {
    /* content: '';
    position: absolute;
    top: 0;
    left: 0; */
    width: 15px;
    height: 15px;
    margin-top: 0;
    /* z-index: 0;
    border: 2px solid var(--border-color);
    border-radius: 1px;
    -webkit-transition: .2s;
    transition: .2s; */
}

.i-form .i-checkbox [type="checkbox"]:not(.filled-in)+span:after,
.i-form .i-radio [type="radio"]:not(:checked)+span:after {
    border: 0;
    transform: scale(0);
}

.loginbtn button>span {
    padding: 8px;
}

/* .i-form */

.i-checkbox [type="checkbox"]:checked+span:before {
    border: 2px solid var(--border-selected-color);
    border-radius: 0;
    top: -10px;
    left: 5px;
    width: 15px;
    height: 5px;
    border-top: 2px solid transparent;
    border-left: 4px solid var(--border-selected-color);
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--border-selected-color);
    transform: rotate(-35deg);
    /* -webkit-backface-visibility: hidden; */
    /* backface-visibility: hidden; */
    /* -webkit-transform-origin: 100% 100%; */
    /* transform-origin: 100% 100%; */
}

.i-form .i-radio [type="radio"]:checked+span:before {
    border: 2px solid var(--border-selected-color);
    border-radius: 0;
    top: -10px;
    left: 5px;
    width: 18px;
    height: 8px;
    border-top: 2px solid transparent;
    border-left: 5px solid var(--border-selected-color);
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--border-selected-color);
    transform: rotate(-40deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
}

.i-btn {
    margin: 0;
    /*margin-top: 35px;*/
    /*line-height: 0;*/
    font-size: 13px;
    display: inline-block;
    box-sizing: border-box;
    /*padding: 10px 15px 8px 15px;*/
    font-weight: 100;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.i-rect-btn {
    border: 1px solid var(--border-selected-color);
    padding: 8px 15px;
}

.i-round-btn {
    padding: 10px 18px 8px 18px;
    border-radius: 60px;
    border: 1px solid var(--border-selected-color);
}

.i-icon-btn {
    padding: 12px 10px;
    width: 40px;
    height: 40px;
    border-radius: 60px;
    font-size: 17px;
    border: none;
    text-align: center;
    vertical-align: middle;
}

.i-bordered-btn {
    background-color: var(--bg-color);
    color: var(--bg-selected-color);
}

.i-solid-btn {
    background-color: var(--selected-color);
    color: var(--bg-color);
}

/*.i-icon-btn:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}*/

.i-btn:hover,
.i-btn:focus {
    color:var(--bg-primary)
    /* color: var(--bg-color); */
    /* background-color: var(--bg-selected-color); */
}

.i-btn-icon {
    display: inline-block;
    text-decoration: none;
    background: none;
    /* font-size: 14px; */
    /* border: 1px solid rgba(0,0,0, .2); */
    /* border-radius: 60px; */
    padding: 10px 15px;
    cursor: pointer;
    color: rgb(0, 0, 0, .5);
    /* height: auto; */
    /* vertical-align: middle; */
}

button.i-btn-icon {
    border: 1px solid rgba(0, 0, 0, .2);
}

.i-btn-icon>span,
.i-btn-icon>i {
    padding: 0px 5px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
}

.i-btn-icon>i {
    font-size: 18px;
}

.i-btn-icon:hover,
.i-btn-icon:focus {
    color: unset;
    background: rgb(240, 240, 240);
}

div {
    border-collapse: collapse;
    border-spacing: 0;
}

/* table, th, td {
  border: none;
}

table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-block {
  width: 100%;
  display: block;
  height: calc(100% - 450px);;
  overflow-y: scroll;
}

table.i-table tr {
  border-bottom: none;
}

table.i-table > tbody > tr:nth-child(odd) {
  background-color: rgba(1, 64, 158, 0.07);
}

table.i-table > tbody > tr > td {
  border-radius: 0;
}
 */

/* table.i-table > tbody > tr {
 -webkit-transition: background-color .25s ease;
  transition: background-color .25s ease;
} */

/* table.i-table > tbody > tr:hover {
  background-color: rgba(1, 64, 158, 0.8);
  color: var(--bg-color);
  box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.2);
}
 */

/*
table.centered thead tr th, table.centered tbody tr td {
  text-align: center;
}*/

/* th {
  font-weight: bold;
}
td, th {
  padding: 5px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}
 */

/* Dropdown Button */

/*.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}*/

/* The container <div> - needed to position the dropdown content */

.i-dropmenu {
    float: right;
    position: relative;
    z-index: 100;
    /* display: inline-block; */
    margin: 0;
}

/* Dropmenu Content (Hidden by Default) */

.i-dropmenu-content {
    top: 0;
    left: -180px;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

/* Links inside the dropmenu */

.i-dropmenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    /*font-size: 15px;*/
    font-weight: lighter;
}

.i-dropmenu-content a:hover {
    background-color: #ddd;
}

.i-dropmenu:hover .i-dropmenu-content {
    display: block;
}

.i-sidenav {
    /* width: 0;*/
    height: 90%;
    position: fixed;
    z-index: 6;
    right: 0;
    top: 0;
    padding-top: 50px;
    background-color: var(--bg-color);
    overflow-x: hidden;
    display: block;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.i-close {
    float: right;
    margin-right: 10px;
}

.i-form-field {
    padding-top: 10px;
    padding-right: 15px;
    height: 420px;
    width: 320px;
    position: relative;
    z-index: 6;
    background-color: transparent;
    overflow-x: hidden;
    display: block;
}

.i-search {
    background-color: white;
    outline: none;
    /*border: none;*/
    border: 1px solid var(--color);
    /* #ff4a56;*/
    border-radius: 15px;
    /*line-height: 0;*/
    font-size: 15px;
    width: 200px;
    color: var(--color);
    /*width: 100%;*/
    display: block;
    box-sizing: border-box;
    color: var(--color);
    /* #ff4a56;*/
    font-weight: 100;
    letter-spacing: 0.01em;
    /*position: relative;*/
    z-index: 1;
    /*margin-top: 35px;*/
    padding: 10px 20px;
    opacity: .4;
    position: relative;
    /* right: 100px;
top: 62px; */
}

.i-search:focus {
    width: 50%;
    /*border: 1px solid var(--selected-color);*/
    color: var(--selected-color);
    opacity: 1;
}

.i-fixed-rb {
    position: fixed;
    right: 50px;
    bottom: 15px;
}

.i-position-relative {
    position: relative;
    display: inline-block;
}

/* .i-fixed-rt {
} */

.material-icons.md-14 {
    font-size: 14px;
}

.material-icons.md-15 {
    font-size: 18px;
    color: var(--dark-color);

    display: none;
    /* color: var(--light-color); */
}

table thead th:hover .material-icons.md-15{
    display: block;
}

.material-icons.md-16 {
    font-size: 16px;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.content {
    position: absolute;
    top: var(--header-height);
    left: calc(var(--side-menubar-width));
    width: calc(100% - var(--side-menubar-width) - 30px - 3%);
    height: calc(100% - var(--header-height) - 20px);
    margin: 10px 15px 0 15px;
    overflow-x: auto;
    overflow-y: auto;
}

.side-menubar {
    z-index: 14;
    /*  position:fixed; */
    /*top:66.01px;*/
    height: 100%;
    padding-top: var(--header-height);
    /*height:-webkit-calc(100% - 66.01px);
height:calc(100% - 66.01px);*/
    width: var(--side-menubar-width);
    background: var(--bg-color);
    background-color: var(--selected-color);
    /*color:rgba(163,175,183,.9);*/
    /* -webkit-box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .1); */
    /*box-shadow:0 2px 4px 0 rgba(0,0,0,.08);*/
    box-shadow: 0px 0px 12px px rgba(0, 0, 0, 0.1);
}

.side-menubar-content {
    height: 100%
}

.side-menubar ul {
    list-style: none;
}

.side-menubar a {
    outline: 0;
}

.side-menubar a:focus,
.side-menubar a:hover {
    text-decoration: none
}

.side-menu {
    font-size: 12px;
    /*padding-bottom:20px;*/
    overflow: visible
}

.side-menu-item {
    position: relative;
    white-space: nowrap;
}

.side-menu>.side-menu-item {
    font-size: 11px;
    padding: 0;
}

.side-menu>.side-menu-item>a {
    display: block;
    margin: 0;
    padding: 10px;
    border: 0;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

    color: var(--h-text-color);
    opacity: 1;
}

.side-menu-title {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.side-menu-icon {
    /* display: block!important; */
    /* margin: 5px auto; */
    /* font-size: 24px; */
    width: 1em;
    text-align: center;
    font-size: 18px;
    opacity: .5;
    display: inline;
    margin: 0px;
    /* padding-left: 10px; */
    position: absolute;
}

.side-menu>.side-menu-item>a:not(.active):hover {
    color: var(--solid-color);
    /*var(--bg-color);*/
    background-color: var(--bg-color);
}

.side-menu>.side-menu-item>.active {
    background-color: var(--solid-color);
}

.side-menu .side-menu-item a:hover>.side-menu-icon,
.side-menu .side-menu-item .active>.side-menu-icon {
    /*color: var(--selected-color);*/
    /*var(--bg-color);*/
    font-size: 36px;
}

.side-menu .side-menu-item .active>.side-menu-title {
    font-size: 13px;
}

/*
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}*/

/* 
n-admin 
Layout Style  
*/

::-webkit-scrollbar {
    width: 4px;
    height: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #b9b9b9;
}

/*
::-webkit-scrollbar-thumb:window-inactive {
background: #b9b9b9; 
}
  
::-webkit-scrollbar-thumb:hover {
background: #968a89; 
}
*/

/* Redesign css of company component  */

/*  
**
**
**
*/

.top-panel {
    /* background-color: lightblue; */
    padding-top: 5px;
    width: 100%;
    height: 40px;
    float: left;
}

.bottom-panel {
    display: none;
    padding-top: 5px;
    width: 100%;
    height: 40px;
    float: left;
}

/* .i-fixed-rb{
  position: relative;
  right: 0px;
  bottom: 0;
  float: left;
} */

.flot-right {
    float: right;
}

.i-search {
    float: right;
    border-radius: 20px;
    border: none;
    background-color: rgb(236, 236, 236);
}

.mar-right-5 {
    margin-right: 5px;
}

/* .i-btn i{
  font-size: 24px;
  font-weight: bold;

} */

.i-icon-btn i {
    font-size: 24px;
    font-weight: bold;
    padding: 0px 0px;
}

.i-btn {
    text-decoration: none;
}

.i-btn i,
.i-btn div {
    /* added by piyush */
    /* padding: 0px; */
    padding: 8px;
    /*added by piyush  */
    /* color:var(--bg-color); */
    /* color:var(--h-text-color); */
    color: var(--secondary-color);
    /*added by piyush  */
    /*  */
    /* font-size: 18px; */
    font-size: 24px;
    /* font-weight: bold; */
    font-weight: lighter;
    border-radius: 60px;
    /* padding-top: 4px; */
    /* width: 32px;  
  height: 32px;  */
    /* border: 1px solid rgb(190, 190, 190); */
    /* background-color: rgb(228, 228, 228); */
    /* color: rgb(73, 73, 73); */
}

.i-btn:hover>i,
.i-btn:hover>div {
    /* added by piyush */
    /* background-color: rgb(228, 228, 228); */
    /* added by piyush */
    /* background-color: var(--bg-color);
    color:var(--q-bg-color); */
    background-color: var(--primary-accent-hover);
    color: var(--secondary-color);
    /* added by piyush */

    /* background-color: var(--bg-accent);
    color: var(--bg-secondary); */
}

.columns-show {
    font-weight: bold;
    text-transform: uppercase;
}

.i-dropmenu-content {
    left: -150px;
    background-color: #f7f7f7;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    /* right: 0px; */
}

.i-right {
    float: right;
}

/* .table-block {
  display: block;
  height: 100%;
  max-height: calc(100% - 150px);
  overflow-y: hidden;
}
 */

/* 
.table-block{
  border: 1px solid lightgray;  
  overflow-y: overlay;
  height: calc(100% - 150px);
  height: 200px;
  max-height: calc(100% - 150px);
} */

/* table {
  width: inherit;
  height: inherit;
  
}
thead {
  width: inherit;
  display: block;
}
 */

/*  tbody {
  width: inherit;
  display: block;
  background-color: #b9b9b9;
  overflow: overlay;
  
  height: calc(100% - 42px);
}
 */

/*  tbody tr, tbody tr td, thead th {
  width: inherit;
  flex-wrap: nowrap;
  white-space: nowrap;
}
 */

*:hover::-webkit-scrollbar-thumb {
    /* color: red; */
    background-color: #b9b9b9;
    /* background: #968a89;  */
    /* background: #ecb6b6;  */
}

/* .table-block::-webkit-scrollbar-thumb {
  background: #b9b9b9; 
} */

/* .table-block:hover::-webkit-scrollbar-thumb{
  background: #b9b9b9; 
} */

.i-btn-txt {
    width: 18px;
    font-size: 16px !important;
    text-align: center;
}

/* chekcbox*/

/* table */

/* table.i-table tr {
  border-bottom: 1px solid var(--border-color);
}
 */

/* table.i-table > tbody > tr:nth-child(odd) {
background-color: rgba(1, 64, 158, 0.07);
  background-color: var(--bg-color);
  background: none;
}
 */

/* table.i-table > tbody > tr > td {
border-radius: 0;
}
 */

/* table.i-table a {
  text-decoration: none;
  font-weight: bold;
  color: black;
}
table.i-table > tbody > tr > td:nth-child(1),
table.i-table > thead > th:nth-child(1) {
  width: 0px;
}
table.i-table > thead {
  height: 40px;
  border-bottom: 1px solid rgb(182, 182, 182);
}
 */

/* table.i-table > tbody > tr {
-webkit-transition: background-color .25s ease;
transition: background-color .25s ease;
} */

/* table.i-table > tbody > tr:hover {
background-color: #f5f5f5;
color: black;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2);
}
 */

.cap-title {
    text-transform: uppercase;
    padding-top: 4px;
    padding-bottom: 6px;
    padding-left: 30px;
    font-size: 24px;
    float: left;
    height: 50px;
    position: fixed;
    z-index: -1;
}

/* Redesign Company form css style */

/* 
**
**
**
 */

.i-sidenav {
    /* width: 0;*/
    height: 100%;
    position: absolute;
    z-index: 6;
    right: 0;
    top: 0;
    background-color: var(--bg-color);
    overflow-x: visible;
    display: block;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
    padding: 0px;
    width: auto;
}

/* style of the n-serarchlist component  */

.panel-container {
    position: relative;
    /*width: calc( var(--right-panel-content-right) - 15px -15px);
    height: calc(100% - 15px);*/
    /* overflow-y: overlay;
  overflow-x: overlay; */
}

.panel-close-btn {
    float: right;
    color: #202124;
    height: 34px;
    width: 34px;
    /* right: 0; */
}

.panel-close-btn:hover i {
    background-color: rgb(228, 228, 228);
}

.panel-close-btn i {
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 60px;
    color: rgb(73, 73, 73);
}

.title-head {
    padding: 12px 15px;
}

.title-head h3 {
    text-transform: uppercase;
}

.pad5x {
    padding: 5px;
}

.panel-content {
    padding-left: 15px;
    padding-bottom: 15px;
    height: calc(100% - 46px - 15px);
}

/*
router-outlet ~ * {
  position: absolute;
  width: 100%;
  height: 100%;
}*/

html,
body,
.app-container {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
    background-color: var(--bg-primary);
    /* background: var(--q-bg-color); */

    /* #102f59; */
}

.rha {
    /* align-items: stretch; */
    height: calc(100%);
    /* flex-direction: row; */
    /* height: inherit; */
}

.rha-content {
    /* align-items: stretch; */
    height: 100%;
}

.row {
    /* display: flex; */
    flex-wrap: wrap;
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* .row {
    display: flex;
}

.col {
    position: relative;
}
 */

.wax {
    flex-grow: 2;
}

.pad10x {
    padding: 10px;
}

.h10x {
    height: 100% !important;
}

.w10x {
    width: 100%;
}

.lw10x {
    /* width: calc(100% - 30px); */
    width: 100%;
}

/*  temporary style added for table */

.i-table {
    width: 100%;
}

.i-table>tbody {
    width: 100%;
}

.i-table>tbody>tr {
    width: 100%;
}

.i-table>tbody>tr>th {
    width: 20px;
}

/* Global Form css 
****
***
**
*/

:root {
    --form-width: 400px;
}

.formContainer {
    width: calc(var(--form-width) - 1px);
    height: 100%;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

/*.i-form {
    height: 80%;
    overflow-x: visible;
    margin: 0;
}

.i-form-body {
    overflow-x: hidden;
    height: calc(100% - 400px);
    padding: 15px 15px 20px 0px;
}

.i-form-footer {
    padding-top: 15px;
}

.i-form-title {
    color: var(--selected-color);
    font-weight: 100;
    letter-spacing: 0.01em;
    padding: 25px 0 0 25px;
    text-transform: uppercase;
}

.i-form-hr {
    margin: 0 25px 0 0;
}*/

.i-form {
    width: 100%;
    padding: 0px;
    height: calc(100% - 130px)
}

.i-form-body {
    overflow: overlay;
    max-height: 100%;
    padding: 5px 10px;
    height: auto;
}

/* .i-form-body:hover { */

/* overflow-y: overlay; */

/* } */

.i-form-footer {
    padding: 25px 27px;
}

.i-form-content {
    padding: 0 17px;
}

.i-content-body {
    padding: 0;
    overflow: hidden;
    height: 90%;
}

.formContainer>.i-content-body {
    height: auto;
}

.i-sform-container>.i-content-body {
    height: auto;
}

.i-sform-container>.i-content-body>.i-form-content {
    padding: 0 27px;
}

.formContainer>.i-content-body>.i-form-content {
    padding: 0 27px;
}

/* Chart Design 
****
***
**
*/

.chart {
    width: 100%;
    padding: 0;
    /* background: yellowgreen; */
}

.cheader {
    display: inline-block;
}

.cheader>.name {
    padding-top: 5px;
    font-size: 16px;
    /* font-size: 14px; */
    /* color: var(--q-bg-color); */
    color: var(--secondary-color);
    font-weight: bold;
}

.cheader>.value {
    font-size: 36px;
    color: rgba(0, 0, 0, .4);
}

.cheader>.value>span {
    font-size: 20px;
    /* color: green; */
}

.cright {
    position: relative;
    display: block;
    float: right;
}

.cright>.action {
    display: block;
    right: 0;
    text-align: right;
    opacity: .5;
}

.cright>.action>a>i {
    font-size: 14px;
}

.cright>.value {
    padding: 8px 8px 0 0;
    font-size: 12px;
    opacity: .7;
}

.red {
    color: red;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

/* Right panel Style
****
***
**
*/

.right-panel-content {
    height: 100%;
    display: flex;
    overflow: overlay;
    overflow-x: hidden;
    /* background-color:rgb(255, 255, 255); */
}

.rpanel-container {
    width: calc(var(--right-panel-content-right) - 10px);
    height: calc(100%);
    /* padding-top: 13px; */
    padding-left: 10px;
}

.panel-content {
    padding-left: 0px;
    padding-bottom: 15px;
    height: calc(100% - 50px - 15px);
}

.container {
    /* height: calc(100% - 45px); */
    height: 100%;
    padding-top: 0px;
}

.right-panel-search {
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 10px;
    height: 37px;
    /* width: 100%; */
}

/* Action panel Style
    Component Module.
****
***
**
*/

.pad-r-7 {
    padding-right: 20px;
}

.i-top-action-container {
    width: 100%;
    /* min-width: calc(100% - 23px); */
    height: auto;
    padding-top: 3px;
}

.i-top-action-container ul {
    display: inline;
}

.i-action-li {
    display: inline-block;
    vertical-align: middle;
}

.i-label {
    margin-right: 10px;
    font-size: 12px;
}

/* .i-checkbox [type="checkbox"]+span:before, .i-checkbox [type="checkbox"]:not(.filled-in)+span:not(.lever):after, [type="radio"]+span:before, [type="radio"]+span:after {
    width: 12px;
    height: 12px;
    margin-top: 0;
} */

/* content: ''; */

/* position: absolute; */

/* top: 0; */

/* left: 0; */

/* z-index: 0; */

/* vertical-align: middle; */

/* margin-top: 3px; */

/* -webkit-transition: .2s; */

/* transition: .2s; */

/* .i-checkbox [type="checkbox"]:checked+span:before {
    border: 2px solid var(--border-selected-color);
    border-radius: 0;
    top: -10px;
    left: 5px;
    width: 15px;
    height: 5px;
    border-top: 2px solid transparent;
    border-left: 4px solid var(--border-selected-color);
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--border-selected-color);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
} */

/* -webkit-backface-visibility: hidden; */

/* backface-visibility: hidden; */

/* -webkit-transform-origin: 100% 100%; */

/* transform-origin: 100% 100%; */

/* View Component style.
  company,staff,agent,customer viewComponent style.
****
***
**
*/

.i-view {
    /* position: absolute; */
    right: 0;
    /* left: 0; */
    /*  height: calc(60% - 60px); */
    /*  width: (var(--form-col-width) * 2); */
    height: 100%;
    /* width: 100%; */
    z-index: 1;
    background-color: white;
    /* padding: 0 10px; */
    /* border-right: var(--separator); */
    /* 1px solid rgb(240, 240, 240); */
}

.i-view-col-width {
    width: 250px;
    float: left;
    padding: 0 17px;
    /* 
    width: var(--view-col-width);
    height: var(--height); */
}

.i-form-col-width {
    width: var(--form-col-width);
    float: left;
    /* padding: 0 10px; */
    /* height: var(--height); */
}

.i-form-col-width-2x {
    width: calc(var(--form-col-width) * 2);
    float: left;
}

.i-form-col-width-3x {
    width: calc(var(--form-col-width) * 3);
    float: left;
}

.i-form-col-width-4x {
    width: calc(var(--form-col-width) * 4);
    float: left;
}

/* .i-form-col-width {
    width: calc(var(--form-col-width) * 2); 
    float: left;
}

.i-form-col-width-2x {
    width: calc(var(--form-col-width) * 3);
    float: left;
}

.i-form-col-width-3x {
    width: calc(var(--form-col-width) * 4);
    float: left;
}
.i-form-col-width-4x {
    width: calc(var(--form-col-width) * 4);
    float: left;
} */

.i-row {
    width: 100%;
    height: auto;
}

.i-col {
    /* display: inline-block; */
    display: inline-table;
    position: relative;
}

.i-view {
    width: 100%;
    /* height: 100%; */
    /*  height: calc(100% - 40px); */
    overflow: hidden;
}

.i-view-content {
    width: calc(100% - 10px);
    /*  height: calc(100% - var(--view-header-height)); */
    overflow: overlay;
    padding-left: 10px;
}

.i-view-content:hover::-webkit-scrollbar {
    width: 4px;
    /* overflow-y: overlay; */
}

.i-col-12 {
    width: 100%;
}

.i-col-11 {
    width: 91.66%;
}

.i-col-10 {
    width: 83.33%;
}

.i-col-9 {
    width: 75%;
}

.i-col-8 {
    width: 66.66%;
}

.i-col-7 {
    width: 58.33%;
}

.i-col-6 {
    width: 50%;
}

.i-col-5 {
    width: 41.66%;
}

.i-col-4 {
    width: 33.33%;
}

.i-col-3 {
    width: 25%;
}

.i-col-2ahf {
    width: 20%;
}

.i-col-2 {
    width: 16.66px;
}

.i-col-1 {
    width: 8.33px;
}

/*
  company group menu & staff group menu 
****
***
*/

.mainMenu {
    font-size: 12px !important;
    font-weight: bold;
    /* padding-top: 10px !important; */
}

.subMenu {
    font-size: 12px !important;
}

.subMenuOfsubmenu {
    font-size: 12px !important;
    padding-left: 10px;
}

.i-form .i-checkbox [type="checkbox"]+span {
    line-height: unset;
    /* padding-top: 2px; */
}

/*
  Cform Identity form Css 
****
***
*/

/* .cformIdentity { */

/* padding-top: 15px; */

/* } */

.cformIdentity>.i-field:nth-child(1),
.cformIdentity>.i-field:nth-child(2) {
    width: 50%;
    display: inline-block;
}

.cformIdentity>.i-field>input[type="text"] {
    margin-top: 0px;
}

.cformIdentity>.i-field>select {
    margin-top: 20px;
}

.cformIdentity>.i-field>select:not(:-moz-placeholder-shown):not(:focus)~label {
    margin-top: 0px;
}

.cformIdentity>.i-field>select:not(:placeholder-shown):not(:focus)~label {
    margin-top: 0px;
}

.cformIdentity>.i-field select:focus~label {
    margin-top: -10px;
}

/*
  Company-wise,
  area-wise,
  building-wise 
  footer-button 
****
***
*/

.i-bach-submit-btn {
    width: calc(100% - 35px);
    height: 40px;
}

.i-bach-submit-btn>button {
    padding-right: 7px;
}

.listHeader {
    width: calc(100% - 7px);
    height: 60px;
}

.listHeader>.i-field {
    display: inline-block;
    /* width: 70%; */
    padding-right: 10px;
    /* height: inherit; */
}

.listHeader>.i-field>select {
    margin-top: 0px;
    margin-left: 75px;
    width: inherit
}

.listHeader>.topActionPnl {
    width: 30%;
    height: inherit;
}

.listHeader .i-field select:not(:-moz-placeholder-shown):not(:focus)~label {
    margin-top: 5px;
}

.listHeader>.i-field>label,
.listHeader .i-field select:not(:placeholder-shown):not(:focus)~label {
    margin-top: 5px;
}

.listHeader .i-field select:focus~label {
    margin-top: 5px;
}

.buttonHide {
    display: none;
}

/*
  view-Header style 
****
***
*/

.circle {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

/*
  s-form style 
****
***
*/

.i-sform-container {
    /* width: var(--s-form-width); */
    height: 100%;
    /* padding: 0px 0 0px 10px; */
}

.i-sform-section {
    padding: 10px 0px 10px 0px;
}

.i-sform-section>.i-title>.content-title {
    width: calc(100% - 34px);
    float: left;
    font-size: 13px;
    color: rgb(0, 0, 0, .7);
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: bold;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.18) */
    padding: 5px 17px;
}

.i-sform-section>.i-title>.content-data {
    width: calc(100% - 34px);
    float: left;
    font-size: 13px;
    color: rgb(0, 0, 0, .7);
    display: table-cell;
    vertical-align: middle;
    /* text-transform: uppercase;
    font-weight: bold; */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.18) */
    padding: 5px 17px;
}

.i-sform-section>.row>.sf-col:nth-child(1),
.i-sform-section>.row>.sf-col:nth-child(2),
.i-sform-section>.cformIdentity>.row>.sf-col:nth-child(1),
.i-sform-section>.cformIdentity>.row>.sf-col:nth-child(2) {
    padding-right: 20px;
}

.i-sform-section>div>.row>.sf-col>.i-checkbox>span {
    padding-left: 30px;
}

.i-sform-section .i-checkbox [type="checkbox"]+span:before,
.i-sform-section .i-checkbox [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin-top: 0;
    border: 2px solid var(--border-color);
    border-radius: 1px;
    transition: .2s;
    z-index: 0;
}

.i-sform-section .i-checkbox [type="checkbox"]:checked+span:before {
    border: 2px solid var(--border-selected-color);
    border-radius: 0;
    top: -8px;
    left: 5px;
    width: 12px;
    height: 5px;
    border-top: 2px solid transparent;
    border-left: 4px solid var(--border-selected-color);
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--border-selected-color);
    transform: rotate(-35deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
}

.i-sform-tax>.row {
    display: table;
    padding-top: 15px;
}

.i-sform-tax>.row>.sf-col {
    display: inline-table !important;
    padding-right: 0px !important;
}

.single-row {
    width: 100%;
    height: 80px;
}

.single-row>.col-height {
    height: 55px;
}

/*
  i-subscriber- address search 
****
***
*/

.i-subscriber-address {
    position: absolute;
    background: white;
    z-index: 4;
    height: auto;
    max-height: 300px;
    overflow-y: hidden;
    width: inherit;
    /* padding: 10px 0px; */
    /* left: 185px; */
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.i-subscriber-address>.i-field>div {
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.171); */
    padding: 5px 10px 5px 5px;
    cursor: pointer;
}

.i-subscriber-address>.i-field>div:hover {
    background-color: rgba(0, 0, 0, .1);
    z-index: 1;
}

.i-subscriber-address>.i-field>div>span {
    font-size: 14px;
}

.sf-col.i-subscriber-address:hover {
    overflow-y: overlay;
}

/* .i-form .i-field input[type="text"] {
    font-size: 14px;
    margin-top: 25px;
}

.i-sform-section>.row>.sf-col>.i-field>select:nth-child(1),
.i-sform-section>.cformIdentity>.row>.sf-col:nth-child(1),
.i-sform-section>.cformIdentity>.row>.sf-col>.i-field>select {
    padding: 0px 0px 3px 0px;
}

.i-form .i-field>label {
    font-size: 11px;
}

.i-field input[type="text"]:not(:placeholder-shown):not(:focus)~label {
    margin-top: -15px;
}

.i-field input[type="text"]:focus:not(:read-only)~label {
    color: var(--label-selected-color);
    margin-top: -20px;
    opacity: 1;
} */

/*
  i-menu style 
****
***
*/

.i-menu {
    list-style: none;
    font-size: 12px;
    overflow: visible
}

.i-submenu {
    position: absolute;
    left: 100%;
    top: -50%;
    padding: 10px 0;
    /* opacity: 0; */
    overflow: hidden;
    width: 0;
    /* display: none; */
    height: inherit;
    background-color: var(--q-bg-color);
    /* background-color: rgba(255, 255, 255, 1); */
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}

.i-menu-item {
    position: relative;
    white-space: nowrap;
}

.i-menu-item {
    font-size: 11px;
    padding: 0;
    /* background-color: var(--q-bg-color); */

    /* opacity: .4; */
}

.i-menu-item>a {
    display: block;
    border: 0;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    /* color: rgba(0, 0, 0, 1); */
    /* added by piyush */
    /* padding: 3px; */
    /* padding: 5px 10px; */
    padding: var(--padding-content);
    /* color: var(--q-heading-color); */
    /* added by piyush */
    color: var(--secondary-color);
    /* color:var(--h-text-color); */
    /*  */
    /* opacity: .6; */

}

/* .i-menu-item>a:first-child{
    padding: 10px 5px 10px 0px;
} */

.i-menu-title {
    display: inline !important;
    vertical-align: middle;
}

.i-menu-title {
    /* add by piyush */
    /* color:var(--h-text-color); */
    color: var(--secondary-color);
    /*  */
    /* color: rgb(140, 140, 140); */
    /* color:var(--color); */
    /* font-size: 14px; */
    font-size: 12px;
    padding-left: 50px;
    /* padding-right: 24px; */
    text-transform: none;
    /* opacity: .5; */
}

.i-menu-icon {
    font-size: 14px;
    /* add by piyush */
    /* color:var(--h-text-color); */
    color: var(--secondary-color);
    /*  */
    /* color: rgb(100, 100, 100); */
    /* opacity: .5; */
    /* display: inline; */
    margin: 0px;
    position: absolute;
    vertical-align: middle;
    width: 24px;
    text-align: center;
}

/* added by piyush */

.i-edit-btn>.i-menu>.i-menu-item:hover{
    background-color: var(--primary-color)!important;
}

/* added by piyush */

.i-menu-item:hover {
    /* background-color: var(--q-h-bg-color); */
    /* background-color: #5eb3b2; */
    /* background-color:var(--menu-hover); */
    /* background-color: var(--primary-hover); */
    /* background-color: #dce0e5; */
    background-color: var(--menu-hover);

    z-index: 1;
    margin: 0px 0px;
}

.i-menu-item:hover>.i-submenu {
    width: 100%;
}

.i-menu-item>.active {
    color: var(--q-bg-color);
    /* background-color: var(--solid-color); */
}

/* .i-menu-item>a:hover,
.i-menu-item>.active { */

/* opacity: .9; */

/* added by piyush */

/* .i-menu-item:hover{ */

/* background-color: var(--primary-color); */

/* } */

/* added by piyush */

/* } */

/* added by piyush */

/* .i-menu-item .active { */

/* added by piyush */

/* .i-menu-item:hover{ */

/* background-color: var(--primary-color); */

/* } */

/* added by piyush */

/* } */

/* added by piyush */

.i-menu-item>.active {}

/* added  by piyush*/

/* mobile menu

*****
***
*/

/* .i-mob-sidebar {
    position: unset;
}
 */

.i-mob-sidebar .i-menubar {
    position: absolute;
    width: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.i-mob-sidebar .i-menubar .i-menubar-content {
    width: 0%;
}

.i-mob-sidebar .i-menubar-back {
    position: absolute;
    width: 0%;
    height: 0%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.i-mob-sidebar-active {
    position: unset;
}

.i-mob-sidebar-active .i-menubar {
    position: absolute;
    width: 70%;
    /* background-color: rgba(0, 0, 0, 0.2); */
}

/* .i-mob-sidebar-active .i-menubar .i-menubar-content {
    width: 70%;
} */

.i-mob-sidebar-active .i-menubar-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

/* .i-mob-sidebar-active .i-menubar .i-menubar-transprnt {
    width: 30%;
    float: right;
    background-color: rgba(0, 0, 0, 0.2);
} */

/*
** list margin for mobile and desktop
*/

/* .margin-l-3 { */

/* margin-left: 30px; */

/* } */

/*
******
*/

.i-content-menu {
    width: calc(100% - 40px);
    padding: 10px 20px;
}

.i-content-menu>.submenu>li {
    display: inline-block;
}

.i-content-menu>.submenu>li>a {
    font-size: 14px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    padding: 0px 10px 0px 10px;
    opacity: .5;
}

/*
****  group field
*/

.i-field-group {
    position: relative;
    margin: 0 17px;
}

.i-field-group>.i-field {
    margin: 0;
    /* width: 70%; */
}

.i-field-group>.i-field~.fixed {
    width: 60%;
    margin: 0;
    position: absolute;
    right: 0;
    /* bottom: 0; */
    top: -32px;
}

.i-field-group>.i-field~.fixed>label {
    top: 35px;
}

/*
****  height set
*/

.i-form-col-width .i-field-data {
    height: 21px;
    float: left;
    font-size: 13px;
    color: rgb(0, 0, 0, .7);
    display: table-cell;
    vertical-align: middle;

    /* text-transform: uppercase;
    font-weight: bold; */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.18) */
    padding: 20px 17px;
}

.i-form-col-width .i-field select,
.i-form-col-width .i-field input,
.i-form-col-width .i-checkbox input {
    height: 21px;
}

/* 
    */

/*
**** renew form
*/

.i-group-radio,
.i-group-checkbox {
    position: relative;
    /* padding: 0px 7px; */
    margin: 0 17px;
}

/* .i-group-title {} */

/* .i-group-radio>.i-radio { */

/* margin: 0 17px; */

/* } */

.i-group-radio>.i-group-title {
    padding: 10px 0px;
}

.i-group-radio>.i-group-title>label {
    font-size: 11px;
    opacity: .8;
}

.i-form .i-radio [type="radio"]:not(:checked)+span {
    padding-right: 30px;
}

.i-form .i-radio [type="radio"]:checked+span {
    padding-right: 30px;
}

.i-pad-top-2 {
    padding-top: 20px;
}

.single-col {
    width: 100%;
    float: left;
}

/* .i-group-radio>label { */

/* padding-left: 10px; */

/* } */

/*
**** Report 
*/

/* 
.i-report-collection {
    padding: 10px 0px 10px 0px;
    font-size: 13px;
}

.i-report-collection>div {
    display: inline-block;
}

.i-report-collection>div>label {
    padding-right: 5px;
    font-weight: bold;
}

.i-report-collection>div>span {
    padding-right: 5px;
    width: auto;
} */

/***
**** Report Filter
**/

.i-report-filter .i-field,
.i-filter-date>.i-field {
    margin: 0;
}

.i-report-collection>div {
    width: calc(100% / 4);
}

.i-filter-btn {
    position: absolute;
    float: right;
    /* margin-right: 40px; */
    margin-top: 2px;
    top: 3px;
    right: 126px;
}

.i-filter-date {
    width: calc(50% - 5px);
    margin-right: 5px;
    display: inline-block;
}

.i-filter-btn>.i-btn-icon {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgb(0, 0, 0, .5);
    /* background-color: #E53935; */
    padding: 5px 10px;
}

.i-filter-btn>.i-btn-icon>span {
    font-size: 12px;
}

/* .i-report-height { */

/* display: none; */

/* } */

.i-report-height>.i-report-filter {
    width: 100%;
}

.i-report-filter>.i-field>input[type='date'] {
    width: 50%;
    display: inline;
}

.i-filter-footer {
    padding: 25px 0;
}

.i-filter {
    position: absolute;
    top: calc(var(--top-actionPenal-height));
    right: 25px;
    z-index: 5;
    /* width: calc(300px - 34px); */
    background: white;
    height: auto;
    padding: 10px 17px 17px 17px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.i-filter-true {
    width: calc(100% - 18px);
    position: absolute;
    z-index: 5;
    top: calc(var(--top-actionPenal-height));
    padding: 10px 18px 17px 0px;
    background: white;
}

.i-filter-true .i-form .i-group {
    width: calc(100%);
    margin-top: 15px;
}

.i-filter-true .i-form .i-group label.i-radio {
    display: block;
}

.i-filter .i-filter-title,
.i-filter-true .i-filter-title {
    font-weight: bold;
    font-size: 14px;
    /* opacity: 0.7; */
    color: rgba(0, 0, 0, 0.8);
}

.i-filter-layer {
    position: absolute;
    width: 100%;
    z-index: 3;
    height: calc(100% - 61px);
}

.i-filter>.i-form {
    min-width: 300px;
}

/* .i-filter-show {
    display: block;
}
.i-filter-hide {
    display: none;
} */

.i-report-height>.i-form {
    position: relative;
    width: calc(300px - 34px);
    background: white;
    height: auto;
    top: 0px;
    padding: 10px 17px 17px 17px;
    left: 27px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.i-filter-header:hover>.i-report-height {
    width: 354px;
    height: 600px;
    display: block;
    position: absolute;
    top: 35px;
    right: 0px;
    z-index: 2;
    background: transparent;
}

.rprDtlLbl>span {
    font-weight: bold;
}

/* 
*** Top-action Penal Style
**
*/

.i-rspVwColumn-true {
    position: absolute;
    background-color: transparent;
    z-index: 2;
    width: calc(var(--view-width) - 30px);
    right: 0;
    height: calc(100% - 25px);
}

.i-rspFrmColumn-true {
    position: absolute;
    background-color: transparent;
    z-index: 2;
    width: calc(var(--form-width) - 30px);
    right: 0;
    height: inherit;
}

.i-rspColumn-true {
    position: absolute;
    background-color: transparent;
    z-index: 3;
    width: calc(var(--content-width) - 30px);
    right: 0;
    height: calc(100% - 25px);
}

.i-rspFilter-true {
    position: absolute;
    background-color: whitesmoke;
    z-index: 1;
    width: calc(var(--content-width) - 30px);
    /* width: 360px; */
    right: 0;
    /* height: 100%; */
    height: calc(100% - 25px);
}

.i-column-content {
    position: relative;
    background-color: white;
    float: right;
    padding: 15px;
    right: 30px;
    z-index: 5;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.i-filter-content .i-filter-title {
    font-weight: bold;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
}

.i-ColumnBody>.i-report-filter {
    height: auto;
    /* max-height: calc(400px - 30px);
    overflow: scroll; */
}

.i-ColumnBody {
    height: auto;
}

.i-column-content .i-column-title {
    font-weight: bold;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    padding: 5px 0 10px 0;
    width: calc(100%);
}

.i-columnLayer,
.i-filter-layer {
    position: absolute;
    width: 100%;
    z-index: 3;
    height: calc(100%);
}

.i-ColumnOpen {
    z-index: 2 !important;
}

.i-filterOpen {
    z-index: 2 !important;
}

.i-filter-bg {
    width: calc(370px - 40px);
}

.i-column-bg,
.i-VWcolumn-bg,
.i-Frmcolumn-bg {
    width: calc(250px - 40px);
}

.i-filter-md {
    width: calc(370px - 40px);
}

.i-column-md,
.i-VWcolumn-md,
.i-Frmcolumn-md {
    width: calc(250px - 40px);
}

.i-Frmcolumn-sm {
    width: calc(var(--form-width) - 50px);
    right: 10px;
}

.i-filter-sm,
.i-column-sm,
.i-VWcolumn-sm {
    width: calc(100% - 50px);
}

.i-view-tbl-1>.i-Vwcolumn-div {
    width: calc(var(--view-width));
}

.i-Frmcolumn-div {
    width: calc(var(--form-width));
}

.i-filter-div {
    width: calc(var(--content-width));
}

@media only screen and (max-width: 609px) {
    .i-menu-title {
        font-weight: bold;
    }

    .i-label {
        display: none;
    }
}

.app-container .popup>.invc q-print {
    /* added by piyush */
     /* height: 100%; */
     /* height: 100vh; */
     /* height: calc(100vh - 61px); */
    /* added by piyush */
   
    /* overflow: auto; */
}

@media print {

    #printMe {
        display: block !important;
    }

    app-root {
        display: none;
    }

    @page {
        /* margin-top: 0; */
        margin-bottom: 0;
    }

    .f,
    .h,
    .app-container .relative,
    .app-container .popup>.vw,
    html head *,
    .actn {
        display: none !important;
    }

    /*   .app-container .popup>.vw {} */

    .app-container .popup>.invc {
        /*   width: 100%;
        margin: 0;
        padding: 0;
        height: 100%; */

        width: 680px;
        min-width: 680px;
        display: flex;
    }

    .app-container .popup>.invc q-print {
        width: 100%;
        padding: 30px 0 0 0;
        height: 100%;
    }

    .app-container .popup>.invc q-print .invoice-box {
        width: 100%;
        padding: 0;
        height: 100%;
        border: none;
    }


    .app-container .popup>q-box {
        border: unset;
    }
}

/***
**** Variable  i- Colors  :)
**/

.i-green {
    color: green;
}

.i-red {
    color: red;
}

.i-field .validationStar {
    color: red;
}

/* @media print {
    body * {
      display: none;
    }
 
} */

/* @media print {
    #Header, #Footer { display: none !important; }
} */

button~q-box {
    position: absolute;
    display: flex;
}

button~q-box>div {
    flex-direction: column;
    z-index: 2;
}

/* q-common, */

q-box {
    position: relative;
    /* width: 100%; */
    /* background-color: red; */
    background-color: transparent;
    display: flex;
    flex-direction: column;

    /* overflow: auto   ;  ADDED  */
}

.v-field,
.v {
    flex-direction: row;
    /* 12-06-2026 */
    /* padding: var(--padding-pl); */
    /* 12-06-2026 */
}

.pddfrm {
    padding: 30px;
}

.fltr {
    z-index: 3;
    background-color: white;
    width: 26%;
    /* border: black; */
    border: 1px solid var(--border-color);
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    /*     border: 1px solid #257d7b; */
}

/* .lay_0 .fltr {
    z-index: 3;
    background-color: white;
    width: 26%;
    border: 1px solid var(--border-color);
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100vh;
} */

.fltr>q-form {
    padding: 5px;
}

.txtclr {
    /*     padding: 5px 18px;
    border-radius: 15px;
    color: white; */
    font-weight: bold;

    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    /* color: white; */
    background-color: var(--q-stts-bg-color);
    color: var(--q-stts-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.popup>.xs {
    /*     width: 15%; */
    width: 24%;
    max-height: calc(100% - 90px);
}

.popup>.s {
    width: 35%;
    /*     max-height: calc(100% - 90px); */

}

.popup>.l,
.profile-edit>.l {
    width: 50%;
    /*     max-height: calc(100% - 90px); */
}

.popup>.xl,
.profile-edit>.xl {
    width: 65%;
    /*   max-height: calc(100% - 90px); */
}

.popup>.xxl {
    width: 80%;
    /* max-height: calc(100% - 90px); */
}

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

.p-0 {
    padding: 0 !important;
}

/* .w35{
    width: 35%;
}

.w65{
    width: 65%;
}

.w75{
    width: 75%;
}

.h45{
    height: 45%;
}


.h50{
    height: 50%;
}

.h55{
    height: 55%;
} */

/* .containLayer  > q-box{
 
    height: 100%;
    overflow: scroll;
} */

/* .dsplycntnts{
    display: contents;
} */

q-spcediv,
.q-spcediv {
    flex: 1 0 0%;
}

.popup {
    /* height: 100%; */
    height: 100vh;
    position: absolute;
    top: 0px;
    /* color: black; */
    /* background: #0000000d; */
    /* background: var(--q-bg-transparent); */
    background: var(--pop-bg);
    backdrop-filter: blur(1px);
    z-index: 2;
    width: 100%;
    overflow: auto;
    left: 0;
}

.popup>q-box,
.profile-edit .profile-editbox {
    /* add by piyush */
    /* padding: 20px 0px 0px 30px;
border-radius: 15px 0px 0px 15px; */
    /*  */
    /* position: absolute;
    top: calc(22% - 75px);
    padding: 30px 30px;
    width: calc(100% - 60px); */
    /*     height: calc(100% - 60px); */
    /* background: #dbe8e7; */
    /*  display: contents; */
    position: relative;
    /*  top: 45px; */
    /* padding: 30px 30px; */
    /*     height: 80%;
    width: 80%; */
    background: var(--bg-color);
    border: 1px solid var(--q-bg-color);
    /* border-radius: 15px; */
    /*   margin-left: auto;
    margin-right: auto; */
    /*  overflow: auto;   */
    /* margin: 25px auto; */
}

/* .lay_0 .popup>q-box>q-view {
    overflow: auto;
} */

@media only screen and (max-width: 800px) {
    .lay_0 .popup>q-box {
        width: 95% !important;
    }
}

.lay_1 .popup>q-box {
    margin: 25px auto;
}

/* added by piyush */

/* added by piyush */

.lay_0 .popup>.invc {
    min-height: 100vh;
    float: right;
    border: 0px;
    /* width: 872px !important; */
    box-shadow: #0000003d 0 3px 8px;
    /* animation: slideIn var(--transition) ease; */
    /* animation: slideIn .3s ease; */
    /* animation: slideIn var(--transition-3s) var(--transition-cubic-bezier) ; */
    /* animation: slideIn .3s cubic-bezier(0.34, 1.56, 0.64, 1); */
    animation: slideIn var(--transition-3s) ease-in-out;
    /* animation:  slideIn 0.8s ease-out forwards; */

    /* transition: var(--transition); */
}

.lay_0 .popup>.vw {
    float: right;
    border: 0px;
    width: 1200px !important;
    box-shadow: #0000003d 0 3px 8px;
    /* animation: slideIn var(--transition) ease; */
    /* animation: slideIn .3s ease; */
    /* animation: slideIn var(--transition-3s) var(--transition-cubic-bezier) ; */
    /* animation: slideIn .3s cubic-bezier(0.34, 1.56, 0.64, 1); */
    animation: slideIn var(--transition-3s) ease-in-out;
    /* animation:  slideIn 0.8s ease-out forwards; */

    /* transition: var(--transition); */
}

/* .lay_0 .popup>.vw,
.lay_0 .popup>.invc {
    float: right;
    border: 0px;
    width: 1200px !important;
    box-shadow: #0000003d 0 3px 8px; */

/* animation: slideIn var(--transition) ease; */

/* animation: slideIn .3s ease; */

/* animation: slideIn var(--transition-3s) var(--transition-cubic-bezier) ; */

/* animation: slideIn .3s cubic-bezier(0.34, 1.56, 0.64, 1); */

/* animation: slideIn var(--transition-3s) var(--transition-cubic-bezier); */

/* animation:  slideIn 0.8s ease-out forwards; */

/* transition: var(--transition); */

/* } */

.lay_0 .popup>.form>q-box:first-child,
.profile-edit .profile-editbox>div:first-child,
.lay_0 .popup>.l>q-box:first-child {
    padding: 11.5px 30px;
}

.lay_1 .popup>q-box,
.lay_0 .popup>.form,
.lay_0 .popup>.l,
.lay_0 .popup>.i,
.profile-edit .profile-editbox {
    float: unset;
    box-shadow: #0000003d 0 3px 8px;
    /* animation: slideOn var(--transition); */
    /* animation: slideOn .3s ease; */
    animation: slideOn var(--transition-5s) ease;
    /* transition: var(--transition); */
}

.lay_0 .popup>.form,
.lay_0 .popup>.l,
.lay_0 .popup>.i,
.profile-edit .profile-editbox {
    margin: auto;
    border: 0px;

}

@keyframes slideIn {
    0% {
        /* opacity: .5; */
        transform: translateX(100vw);
    }

    /* 70% {
        opacity: .8;
        transform: translatex(-50px);
    } */


    100% {
        /* opacity: 1; */
        transform: translateX(0);
    }


}

@keyframes slideOn {
    0% {
        /* opacity: .5; */
        transform: translateY(-100vh);

    }

    /* 70% {
        opacity: .8;
        transform: translatey(50px);
    } */


    100% {
        /* opacity: 1; */
        transform: translateY(0);
    }
}

.plist>q-list {
    width: 100%;
    padding: 0;
}

.popup>q-box>q-box:first-child,
.profile-edit .profile-editbox>div:first-child {
    padding: 9.5px 30px;
    width: calc(100% - 60px);
    background-color: var(--q-bg-color);
    color: var(--h-text-color);
    /* color: white; */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    font-size: 20px;
    align-items: center;
}

.lay_0 .popup>q-box>q-box:nth-child(2)

/* ,
.profile-edit .profile-editbox>div:nth-child(2) */
/*  {
    height: calc(100vh - 111px);
}
 */
.popup>q-box>q-box:nth-child(2),
.profile-edit .profile-editbox>div:nth-child(2) {
    /*   background: red; */
    overflow: auto;
    /* height: inherit; */
}

.popup>q-box>q-box:nth-child(3),
.popup>q-box>q-box:last-child,
.i-contact-edit .submit {
    padding: 15px 30px;
    width: calc(100% - 60px);
    background-color: white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    align-items: center;
    /* added by piyush */
    /* border-top: 1px solid var(--secondary-color); */
    background-color: var(--primary-color);
    /* added by piyush */
    /* border-top: 1px solid #00a09d; */
}

.o {
    overflow: auto;
}

.m-vw>q-box:nth-child(2) {
    width: calc(100% - 285px);
}

/* .v>q-box, */

.v>q-group {
    width: 100%;
}

.d-actn {
    width: auto;
}

q-form q-number,
q-form q-radio,
q-form q-textarea,
q-form q-scheckbox,
q-form q-date,
q-form q-itext,
q-form q-input,
q-form q-listlabel,
q-form q-multipleselect,
q-form q-select {
    /*  padding: 10px; */
    /* padding: 5px 10px 5px; */
    /* 15-06-2026 */
    /* padding: 5px 0; */

    /* 15-06-2026 */
    display: block;
}

q-form q-number>div,
q-form q-radio>div,
q-form q-textarea>div,
q-form q-scheckbox>label,
q-form q-date>div,
q-form q-itext>div,
q-form q-input>div,
q-form q-select>div,
/* q-form q-multipleselect>div, */
q-form q-listlabel>div,
/* q-form q-multipleselect>div, */
.card-body>.forms-sample>.form-group {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    flex: 1;
    align-items: center;
    /* height: 0; */
}

q-form q-multipleselect>div
{
    display: flex;
    flex: 0 0 auto;
    width: auto;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

/* added by piyush */

q-tarray table tbody tr td q-itext>div:nth-child(2),
q-tarray table tbody tr td  q-input>div:nth-child(2),
q-tarray table tbody tr td  q-number>div:nth-child(2),
q-tarray table tbody tr td  q-select>div:nth-child(2),
q-tarray table tbody tr td  q-select>div:nth-child(2)

{
    display: flex;
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    flex: 1;
    align-items: center;
    height: 0;
}

/* added by piyush */

q-radio>div>div>div {
    display: flex;
    /* width: 100%; */
    padding-right: 25px;
}

q-form {
    padding: 30px;
    /* width: calc(100% - 60px); */
    overflow: auto !important;
    /* added by piyush */
    margin: var(--q-margin);
    background-color: white;
    border-radius: var(--q-bdr-radius);
    border: var(--q-bdr);
    /* width: calc(100% - 12px); */
    /* width: calc(100% - 72px); */
    /* added by piyush */
    /* GEDIT */
}

q-form q-number>div>span,
q-radio>div>span,
q-form q-textarea>div>span,
q-form q-scheckbox>label>span,
q-form q-date>div>span,
q-form q-itext>div>span,
q-form q-select>div>span,
q-form q-multipleselect>div>span,
q-form q-input>div>span,
q-form q-listlabel>div>span,
.card-body>.forms-sample>.form-group>label {
    min-width: 150px;
    /* added by piyush */
    color: var(--h-text-color);
    /* added by piyush */
    /* color: var(--q-bg-color); */
}

q-radio>div>div>div {
    align-items: center;
}

q-radio>div>div>div>span {
    color: #989898;
    font-size: 13px;
    padding: 5px;
    white-space: nowrap;
}

/* q-form  q-group {
    padd
} */

.l1 {
    font-size: 24px;
}

.l2 {
    font-size: 20px;
}

.l3 {
    font-size: 16px;
}

.p0 * {
    padding: 0;
}

q-group {
    padding: 5px 0;
}

.h {
    background-color: var(--q-bg-color);
    padding: 15px 30px;
    width: calc(100% - 60px);
    color: var(--q-h-bg-color);
    align-items: center;
}

.h>q-label {
    font-size: 24px;
}

.hd,
.fhd {
    /* font-size: 24px; */
    color: var(--q-header-color);
    /* padding: 10px 25px 0px 25px; */
    padding: var(--padding-table);
    /* width: calc(100% - 12px); */
    /* added by piyush */
    /* background-color: var(--q-h-bg-color); */
    /* background-color:var(--q-heading-color) ; */
    /* latest box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
    /* added by piyush */
    align-items: center;
    font-weight: 500;

}

.hd>q-label {
    font-size: 24px;
}

.fhd {
    background-color: #00a09d;
    color: white;
}

.ghd {
    font-size: 18px;
    padding: 7px 0;
    /* added by piyush */
    color: var(--secondary-color);
    /* added by piyush */
    /* color: #989898; */
}

.active>button>span {
    color: red;
}

/* form q-box > * {
    margin-left: 10px;
}
form q-box > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
form q-box > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; } */

/* q-box > * {
    margin: 10px;
} */

form q-box q-box,
form q-box q-group {
    padding: 0 25px;
    /* margin-right: 15px; */
}

form q-box q-box:first-child,
form q-box q-group:first-child {
    padding-top: 0 !important;
    padding-left: 0 !important;
}

form q-box q-box:last-child,
form q-box q-group:last-child {
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}

q-box>q-button {
    padding: 0 5px;
    /* added by piyush */
    /* color: var(--h-text-color); */
    /* border: 1px solid var(--secondary-color); */
    /* added by piyush */
}

.q-checkbox [type="checkbox"]:not(:checked),
.q-checkbox [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* .i-form .i-checkbox [type="checkbox"] {
checkbox aspect
} */

.q-checkbox [type="checkbox"]+span {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    /* display: inline-block; */
    height: 25px;
    width: inherit;
    /* line-height: 32px; */
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.q-checkbox [type="checkbox"]+span:before,
.q-checkbox [type="checkbox"]:not(.filled-in)+span:not(.lever):after

/* ,
[type="radio"]+span:before,
[type="radio"]+span:after */
    {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    margin-top: 0;
    border: 2px solid var(--border-color);
    border-radius: 1px;
    transition: .2s;
    z-index: 0;
}

.q-checkbox [type="checkbox"]:not(.filled-in)+span:after {
    border: 0;
    transform: scale(0);
}

.q-checkbox [type="checkbox"]:checked+span:before {
    border: 2px solid var(--border-selected-color);
    border-radius: 0;
    top: -10px;
    left: 5px;
    width: 15px;
    height: 5px;
    border-top: 2px solid transparent;
    border-left: 4px solid var(--border-selected-color);
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--border-selected-color);
    transform: rotate(-35deg);
    backface-visibility: hidden;
    transform-origin: 100% 100%;
}

.import>q-box {
    height: 100%;
    width: 100%;
    border: 2px solid var(--border-color);
    left: 0;
    z-index: 2;
    background-color: white;
}

.q-profile {
    background-color: white;
    z-index: 3;
    height: inherit;
    width: 100%;
    height: calc(100% - 7px);
    padding-top: 7px;
}

q-form .validationStar,
.form-group .validationStar {
    color: red;
    padding-left: 5px;
}

.f {
    bottom: 0;
    padding: 10px 30px;
    position: absolute;
    width: calc(100% - 60px);
    border-top: 1px solid var(--q-bg-color);
    /*     background-color: white; */
    background-color: var(--q-h-bg-color);
    color: var(--q-bg-color);
    /*     border-b: 1px solid #828282; */
}

.f>q-ptext>span {
    font-family: monospace;
}

.vw {
    width: calc(100% - 90px);
}

q-view>q-box {
    /* padding: 30px; */
    width: calc(100% - 60px);
}

/* q-view q-box>q-formview {
      min-width: 30%;
    width: 30%
} */

q-view>q-box>q-list {
    width: 70%;
}

.i {
    width: 80%;
    /* 15-06-2026 */
    /* height: calc(100% - 90px); */

    /* 15-06-2026 */
}

q-tax {
    display: flex;
    flex-direction: column;
}

.pl-0 {
    padding-left: 0px;
}

.pr-0 {
    padding-right: 0px;
}

.i .w100 {
    width: 100%;
}

.p0 {
    padding: 0px;
}

.prf-btn button,
.prf-btn button span {
    width: 100%;
}

.prf-btn button span {
    margin: 5px;
}

.lh .wrapper {
    height: calc(100vh - 180px);
    /* height: calc(100vh - 220px); */

}

app-admin-layout .lh .wrapper {
    /* height: calc(100vh - 180px); */
    /* height: calc(100vh - 220px); */

}

.flh .wrapper {
    height: calc(100vh - 190px);
}

.v .w-245 {
    width: calc(100% - 245px);
}

.h100 {
    height: 100%;
}

/* 
@media only screen and (max-width: 900px) {

    .mm {
        flex-direction: column;
        position: absolute;
        width: 215px;
        top: 65px;
        height: auto;
        z-index: 2;
    }

    .mm>q-button>q-box {
        left: 215px;
    }
} */

.mm {
    flex-direction: column;
    position: fixed;
    width: 215px;
    top: 0px;
    height: 100vh;
    z-index: 2;
    background-color: var(--bg-color);
}

.mm>q-button>q-box {
    position: relative;
}

.bg-fs {
    top: 0;
    position: fixed;
    background: var(--q-bg-transparent);
    z-index: 2;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
}

.mbl {
    display: none;
    padding-right: 15px;
}

.dsplynm {
    font-size: 19px;
    font-weight: bold;
    padding: 0 30px;
    line-height: 59px;
    color: #f1f1f1;
    background-color: var(--q-bg-color);
}

.vw>.actn>:last-child * {
    padding: 0;
    color: var(--h-text-color);
}

@media only screen and (max-width: 900px) {
    body {
        overflow-y: auto;
    }

    .mbl {
        display: block;
    }

    .dsktp {
        display: none;
    }

    .m-vw,
    q-form .v {
        flex-direction: column;
    }

    .popup>.l,
    .popup>.i,
    .popup>.s,
    .popup>.xl,
    .popup>.vw,
    .popup>.xxl {
        width: 95%;
    }

    .invc {
        display: inline-table;
    }

    q-form .v q-box,
    q-form .v q-group {
        padding: 0;
    }

    .popup>q-box>q-box:last-child {
        padding: 15px 20px;
        width: calc(100% - 40px);
    }

    /* .i .v:first-child {
        flex-direction: row;
    }

    .i .v:first-child q-label {
        width: 100%;
    }

    .i .v:first-child q-button {
        padding: 0;
    } */

    .i>.v,
    q-view>q-box,
    q-textarea> :first-child,
    q-radio> :first-child,
    q-date> :first-child,
    q-itext> :first-child,
    q-number> :first-child,
    q-select> :first-child,
    q-listlabel> :first-child,
    .card-body>.forms-sample>.form-group {
        flex-direction: column;
    }

    q-view q-box>q-formview,
    q-textarea> :first-child span,
    q-radio> :first-child span,
    q-date> :first-child span,
    q-itext> :first-child span,
    q-number> :first-child span,
    q-select> :first-child span,
    q-listlabel> :first-child span,
    .card-body>.forms-sample>.form-group>label {
        width: 100%;
    }

    q-formview div span,
    q-formview div p,
    q-radio> :first-child div {
        width: 100%;
    }

    q-textarea>:last-child span,
    q-radio>:last-child span,
    q-date>:last-child span,
    q-itext>:last-child span,
    q-number>:last-child span,
    q-listlabel>:last-child span,
    q-select>:last-child span {
        display: none;
    }

    .popup>.s {
        max-height: -moz-fit-content;
        max-height: fit-content;
    }

    q-view q-box>q-formview div,
    .actn {
        flex-direction: column;
    }

    .actn q-label,
    .actn q-button {
        width: 100%;
        padding: 5px 0;
    }

    .actn q-button button {
        width: 100%;
    }

    .actn q-button button span {
        width: 100%;
        text-align: center;
    }


    .f {
        /* position: sticky; */
        top: 100vh;
    }

    .lh .wrapper {
        height: 100%;
    }

    .filter q-form {
        position: fixed;
        z-index: 10;
        top: 35px;
        overflow-y: auto;
        width: 68%;
        max-height: calc(100% - 130px);
    }

    .d-actn {
        width: 100%;
    }

    .d-actn q-label {
        width: 100%;
    }

    .d-actn q-label,
    .d-actn q-button {
        padding: 0;
    }

    .d-actn .mbl {
        width: auto;
    }

    .m-vw>q-box:nth-child(2) {
        width: 100%;
    }
}

.pm q-box {
    left: 0;
    position: relative;
}

.sbmn button {
    padding-left: 20px;
}

/* .sbmn q-button {
    padding: 0px;
}
 */

.tm {
    overflow: auto;
    padding-bottom: 30px;
}

.d-rw {
    flex-direction: row;
    align-items: center;
    background-color: var(--q-bg-color);
}

.mbl button {
    color: #f1f1f1;
}

.flx {
    display: flex;
}

.mbl-flx-clm {
    flex-direction: column;
}

.d-actn {
    flex-direction: row;
}

.content-title {
    white-space: nowrap;
}

.sts-lbl {
    /* height: 34px; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width:36px; */
    /* padding: 0px; */
    font-weight: 400;
    /* min-width: 90px; */
    /* align-items: center; */
    color: var(--q-stts-color);
    /* added by piyush */
    background-color: var(--q-bg-color);
    /* margin-right: -23px; */
    margin-right: -19px;
    z-index: 1;
    padding: 0px 15px;
    /* border: 1px solid black; */
    clip-path: polygon(0 0, 85% 0%, 100% 50%, 85% 100%, 0 100%, 15% 50%);
    /* added by piyush */
    /*     color: #868686; */
}

.sts-lbl i {
    font-weight: bold;
    /* line-height: 24px; */
    font-size: 12px;
    padding: 5px;
    min-width: 45px;
}

.sts-lbl span {
    min-width: 71px;
    /* min-width:102px; */
    font-weight: 400;
    /* line-height: 24px; */
    font-size: 12px;
    padding: 5px;
    text-align: center;
    /* added by piyush */
    /* color:var( --q-heading-color); */

    /* margin-left: -40px; */
    /* background-color: var(--q-bg-color);
  padding: 10px;
  border: 1px solid black;
  clip-path: polygon(0 0, 70% 0%, 100% 50%, 70% 100%, 0 100%, 20% 50%); */

    /* added by piyush */
}

.sts-lbl:first-child {
    /* margin-left: 0px; */
    /* clip-path: polygon(0 0, 85% 0%, 100% 50%, 85% 100%, 0 100%, 0% 50%); */
    clip-path: polygon(0 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 50%);
    border-radius: 5px 0px 0px 5px;
}

.sts-lbl:last-child {
    margin-right: 2px;
    padding: 0px 13px;

    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 15% 50%);
    border-radius: 0px 5px 5px 0px;
}

.stts {
    /* display: contents; */
    display: inline-flex;
    margin-left: auto;
    /* background-color: var(--q-bg-color); */
}

.s-green {
    color: green;
}

.s-red {
    color: #cf0303;
}

q-label {
    display: flex;
    align-items: center;
    padding-right: 30px;
}

.card-body>.forms-sample>.form-group>label,
.dynamic-form .content-title {
    font-size: 13px;
    font-weight: bold;
}

.dn {
    display: none;
}

.actn-bar {
    padding: 10px 30px;
    /*11-06-2026 */
    /* margin-bottom: var(--view-mrgbttm); */
    /*11-06-2026 */
    /* added by piyush */
    /* height: 50px;
    display: flex;
    align-items: center; */
    /* added by piyush */
}

.bl {
    border-left: 1px solid var(--q-bg-color);
}

.br {
    border-right: 1px solid var(--q-bg-color);
}

.bb {
    border-bottom: 1px solid var(--q-bg-color);
    /* 13-06-2026 */
    background-color: var(--primary-color);
    /* 13-06-2026 */
    /* added by piyush */
    /* display: flex;
    justify-content: space-between; */
    /* added by piyush */
}

.bt {
    border-top: 1px solid var(--q-bg-color);
}

.vw-bar {
    padding: 0;
    width: 100%;
}

.npddfrm {
    padding: 0;
}

.p-30 {
    /* padding: 30px; */
    /* 13-06-2026 */
    padding: 30px;
    /* 13-06-2026 */
}

/* added by piyush */

q-view {
    /* background-color: var(--light-color); */
    margin: var(--q-margin);
    /* width: calc(100%-60px); */
    width: calc(100% - 10px);
    /* height: 100vh; */
    min-height: calc(100vh - 61px);
    /* width: 100%; */
    border-radius: var(--q-bdr-radius);
    /* height: 100vh; */
    /* border:var(--q-bdr); */
    /* overflow:scroll; */
}

/* added by piyush */

q-view .ghd {
    padding: 5px 30px;
}

.tbl-hdr-bdr {
    width: 100%;
    border-bottom: 1px solid var(--q-bg-color);
    position: absolute;
    top: 35px;
    /*     z-index: 2; */
}

/* .pb-30 { */

/*     padding-bottom: 30px; */

/* } */

q-hr-label {
    display: flex;
    align-items: center;
    /* padding-top: 30px; */
    /* color: var(--q-bg-color); blanked by me */
    color: var(--q-stts-color);
    /* opacity: .5; */
    /* 12-06-2026 */
    /* padding: var(--padding-table); */
    padding: var(--padding-hrlbl);
    /* 12-06-2026 */
}

.btn-success {
    /* background-color: #0fa90f; */
    /* background-color: #0fa90f8c; */
    /* background-color: #08cd335e; */
    background-color: #3ed4ed29;
    border: 1px solid var(--status-primary);
}

/* .btn-success .sts-lbl{

} */

.btn-primary {
    /* background-color: #102f59; */

    /* background-color: #01c7e7c2; */
    background-color: var(--status-primary);
    border: 1px solid var(--status-primary);

}

.btn-red {
    background-color: var(--status-red);
    border: 1px solid var(--status-red);
}

.btn-primary .content-title,
.btn-red .content-title {
    color: var(--bg-color)
}

.btn-light .content-title {
    color: var(--secondary-color);
}

.btn-light {
    /* background-color: grey; */
    /* background-color: #80808075; */
    background-color: var(--status-light);
    border: 1px solid var(--status-light);
}

q-hr-label hr {
    flex: 1 1 auto;
    /* background: var(--q-bg-color); blanked by me*/
    height: 2px;
    background-color: var(--q-stts-color);
    border: none;
}

q-hr-label span {
    /* added by piyush */
    /* padding: 0 10px; */
    /* padding-left:20px; */
    /* added by piyush */
    text-transform: uppercase;
    /* color: var(--q-stts-color); */
    color: var(--secondary-color);
    font-size: 16px;
    /* font-weight: bold; */
    font-weight: 500;
}

.u-nm {
    font-size: 24px;
    color: var(--q-bg-color);
    padding: 10px 30px;
}

.fr {
    float: right;
}

.w-100 {
    width: 100%;
}

.invc {
    width: 850px;
    min-width: 850px;
    display: flex;
}

.p-list {
    width: 60%;
}

.popup>.p-list>q-box:last-child {
    padding: 0;
    width: 100%;
}

.p-list q-list {
    width: 100%;
}

/* q-chart {
    width: 33%;
}
 */

.dashboard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    width: 100%;
}

.dashboard q-chart {
    padding: 30px;
}

.cwb q-cardwrap {
    /* width: 16.366666667%; */
    width: calc(33.33333333%);
}

.cwb q-cardwrap .cheader>.value {
    font-size: 18px;
}

.row-cols-1>* {
    flex: 0 0 auto;
    width: calc(100% - 60px);
    /*     width: 100%; */
}

@media (min-width: 1200px) {
    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: calc(16.66666667% - 60px);
        /* width: 33.3333333333%; */
    }

    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: calc(20% - 60px);
        /* width: 33.3333333333%; */
    }

    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: calc(25% - 60px);
        /* width: 33.3333333333%; */
    }

    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: calc(33.3333333333% - 60px);
        /* width: 33.3333333333%; */
    }

    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: calc(50% - 60px);
        /* width: 33.3333333333%; */
    }

    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: calc(100% - 60px);
        /* width: 33.3333333333%; */
    }
}

@media (max-width: 1000px) {
    .cwb q-cardwrap {
        width: calc(50%);
    }
}

@media (max-width: 700px) {
    .cwb q-cardwrap {
        width: calc(100%);
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: calc(50% - 60px);
        /*   width: 50%; */
    }
}

.plist {
    padding: 0;
    width: 100%;
}

.v-field q-itext,
.v-field q-listlabel,
.v-field q-select {
    width: 50%;
}

.v-field q-select:first-child {
    padding: 10px 10px 10px 0px;
}

.v-field q-listlabel:first-child {
    padding: 10px 10px 10px 0px;
}

.v-field q-itext:last-child {
    padding: 10px 0px 10px 10px;
}

.dsktp span {
    padding-left: 0;
    padding-right: 0;
    /* ma-right: 5px; */
    vertical-align: middle;
    margin-right: 5px;;
}

.terms {
    flex-direction: row;
    /* 12-06-2026 */
    /* padding-top: 0px;
    padding-left: var(--padding-pl);
    padding-bottom: var(--padding-pl);
    padding-right: var(--padding-pl); */
    padding: var(--padding-pl);
    /* 12-06-2026 */
}

.w50 {
    width: 50%;
}

.pr-25 {
    padding-right: 25px;
}

/* .terms q-select {
    width: 50%;
    padding-right: 25px;
} */

.terms app-form-multiple>div {
    width: 100%;
}

.terms app-form-multiple>div>div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* .terms .chbox {
    max-width: 100%;
}
 */

.terms app-form-multiple>div>div:first-child>label {
    max-width: 100%;
    padding: 2px;
    font-size: 13px;
}

.mis {
    vertical-align: middle;
    position: absolute;
    right: 0;
    color: var(--border-color);
}

.material-icons.active {
    color: var(--q-heading-color);
}

.mis_tr {
    top: 6px;
}

.mis_fls {
    top: 12px;

}

.r-10 {
    right: 10px;
}

/* q-cardwrap {
    display: flex;
    margin: 25px;
    flex-direction: column;
    line-height: 30px;
    background-color: var(--q-h-bg-color);
}

q-cardwrap label {
    color: var(--q-bg-color);
    padding: 15px 25px 0px 25px;
    font-weight: bold;
}

q-cardwrap span {
    padding: 0 25px 15px 25px;
}
 */

q-cardwrap div {
    margin: 30px;
    background-color: var(--q-h-bg-color);
}

.cwb {
    flex: 0 0 auto;
    flex-direction: row;
}

.cwb * {
    flex: 0 0 auto;
    /* width: calc(16.66666667%); */
}

q-cardwrap div {
    width: calc(100% - 60px);
}

q-cardwrap .cheader>.name,
q-cardwrap div p {
    padding: 10px 20px;
}

.db-box {
    overflow: auto;
    height: calc(100vh - 140px);
    position: fixed;
    top: 110px;
    /* top: 100px; */
    display: block;
    /* overflow-x: auto; */
    /* overflow-y: auto; */
    /* bottom: 171px; */
}

/* ***********************  lay_0     ********************* */

.lay_0 .db-box {
    /* overflow: auto; */
    height: calc(100vh - 178px);
    /* position: fixed; */
    top: 132px;
    /* top: 100px; */
    /* display: block; */
    /* overflow-x: auto; */
    /* overflow-y: auto; */
    /* bottom: 171px; */
}

/* .lay_0 .hd { */

/* z-index: 1; */

/* background-color: white; */

/* } */

/* .lay_0 .i-hmenu>.i-menu-item:hover>.i-submenu,
.lay_0 .i-hmenu>.i-menu-item>.i-submenu { */

/* background-color: #d3dff3 !important; */

/* background-color: rgb(250 250 250); */

/* } */

/* ***********************  lay_0     ********************* */

.exl-lst {
    padding: 0;
    width: 100%;
}

.exl-lst .ghd {
    padding: 0;
}

.lbl-51 q-label {
    height: 51px;
}

/* *************************************************************************************************** */

@keyframes slideMenu {

    0% {
        width: 0px;
    }

    100% {
        width: -250px;
    }
}

.vw-bar {
    overflow: auto;
}

.mm {
    animation-name: slideMenu;
    animation-duration: .5s;
}

.mm,
.mm button,
.add>button>span {
    transition: var(--transition);
}

.mm button {
    margin: 5px 0px;
    padding: 0px;
}

.db-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.db-box .dashboard {
    width: 80%;
    height: 100%;
    /* padding-top: 70px; */
}

.cwb {
    width: 20% !important;
    position: sticky;
    top: 0;
    justify-content: space-between;
}

.cwb q-cardwrap div {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin: 10px 25px;
}

/* .dashboard q-chart {
    padding: 10px 20px;
} */

.chart {
    padding: 20px;
    width: auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.cwb q-cardwrap {
    width: 100%;
    padding-top: 20px;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .row-cols-md-2>* {
        width: calc(100% - 60px);
    }
}

/* .txtclr { */

/* min-width: 60px; */

/* } */

.tbl-hdr-bdr {
    display: none;
}

.i-btn:hover,
.i-btn:focus {
    color: var(--q-bg-color);
    /* background-color: var(--bg-selected-color); */
}

/* .hd { */

/* border-bottom: 1px solid var(--q-bg-color); */

/* z-index: 1; */

/* } */

.unpaid {
    border: 1px solid red;
}

.unpaid .name {
    color: red;
}

.paid {
    border: 1px solid #ffbf00;
}

.paid .name {
    color: #ffbf00;
}

.received {
    border: 1px solid #4CAF50;
}

.received .name {
    color: #4CAF50;
}

.unreceived {
    border: 1px solid #2196F3;
}

.unreceived .name {
    color: #2196F3;
}

.challanin {
    border: 1px solid cadetblue;
}

.challanin .name {
    color: cadetblue;
}

.challanout {
    border: 1px solid coral;
}

.challanout .name {
    color: coral;
}

q-cardwrap div {
    background-color: transparent;
}

button,
.download>button>span,
.export>button>span,
.import>button>span,
.filter>button>span,
.refresh>button>span,
.add>button>span,
select,
input,
.reset>button>span,
.close>button>span,
.actn-bar q-button>button>span,
.apply>button>span,
.submit>button>span,
.edit>button>span,
.delete>button>span,
/* .popup>q-box, */
.fltr {
    border-radius: 15px;
}

.i-form-body input {
    border-radius: 5px;
}

.lay_0 button,
.lay_0 .download>button>span,
.lay_0 .export>button>span,
.lay_0 .import>button>span,
.lay_0 .filter>button>span,
.lay_0 .refresh>button>span,
.lay_0 .add>button>span,
.lay_0 select,
.lay_0 input,
.form-group>input,
.lay_0 .reset>button>span,
.lay_0 .close>button>span,
.lay_0 .actn-bar q-button>button>span,
.lay_0 .apply>button>span,
.lay_0 .submit>button>span,
.lay_0 .edit>button>span,
.lay_0 .delete>button>span,

/* .lay_0 .popup>q-box, */
.lay_0 .fltr {
    /* border-radius: 5px; */
    border-radius: var(--border-radius);
    /* added by piyush */
    /* added by piyush */
}

.lay_0 .popup>q-box>q-box:first-child,
.lay_1 .popup>q-box>q-box:first-child,
.profile-edit .profile-editbox>div:first-child {
    border-top-left-radius: 0px;
    /* added by piyush */
    /* border-top-left-radius: 20px; */
    border-top-right-radius: 0px;
}

/* .lay_1 .popup>q-box>q-box:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
} */

.popup>q-box>q-box:nth-child(3),
.popup>q-box>q-box:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.vw-bar {
    flex-direction: column;
    overflow: auto;
    width: 100%;
    /*11-06-2026 */
    row-gap: var(--view-mrgbttm);
    background-color: var(--primary-color);
    /*11-06-2026 */
}

.p-30 {
    display: flex;
    /* width: 100%; */
    flex-wrap: wrap;
    overflow: auto;
}

q-view q-box>q-formview {
    width: auto;
    border-radius: var(--q-bdr-radius);
}

.p-30 .p-50 {
    width: 50%
}

.pm {
    padding: 0px 10px;
}

/* Profile button */

.card-body>.forms-sample>.form-group {
    padding: 5px 0;
    /* display: block; */

}

.i-contact-edit .submit {
    display: flex;
}

.i-contact-edit .card-body {
    padding: 30px;
    /* added by piyush */
    /* width: calc(100% - 60px); */
    background-color: var(--light-color);
    margin: var(--q-margin);
    border: 1px solid var(--border-color);
    border-radius: var(--q-bdr-radius);
    /* added by piyush */
    overflow: auto !important;
}

.i-contact-edit .card-body input {
    display: block;
    font-family: inherit;
    font-size: 14px;
    width: calc(100% - 30px);
    /*   width: 95%; */
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
    padding: 10px 15px;
    color: rgba(0, 0, 0, 0.7);
}

.i-contact-edit .card-body input:focus {
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* button>span:hover {
    color: unset;
    background-color: unset;
    border: none;
    transition: 0.4s;
} */

.error {
    color: red;
    text-transform: inherit;
    font-size: 11px;
    padding-bottom: 3px;

}

q-formview {
    /* border-right: 0px !important; */
    /* added by piyush */
    /* background-color: var(--light-color); */
    /* border-radius: var(--q-bdr-radius); */
    /* border:var(--q-bdr); */
    /* added by piyush */
}

/* 12-06-2026 */

.frmtbl {
    background-color: var(--light-color);
    border: var(--q-bdr);
    border-radius: var(--q-bdr-radius);
    margin-bottom: var(--view-mrgbttm);
    /* background-color: red; */
}

.dsflx {
    display: flex;
    flex-direction: row;

}

.prtbg {
    border: var(--q-bdr);
    background-color: var(--light-color);
    border-radius: var(--q-bdr-radius);
}

/* 12-06-2026 */

/* 13-06-2026 */

/* -----------------------------------table----------------------------------------------- */

q-tarray .wrapper table tbody tr:hover {
    background-color:var(--table-hover-muted) !important;
}

.wrapper {
    overflow: auto;
    display: block;
    position: relative;
    /* background-color: var(--light-color); */
    background-color: var(--table-bg);
     /* padding-bottom: 35px; */
    /* margin: var(--q-margin); */
    /* border-radius: var(--q-bdr-radius); */
    /* border: 1px solid var(--border-color); */
    /* margin-bottom: var(--view-mrgbttm); */
    /* added by piyush */
    /* added by piyush */
    /* height: calc(100% - 60px); */
}

/* .wrapper table thead th */

/* .wrapper table thead th tr */

/* { */

/* background-color: var(--primary-color); */

/* background-color: var(--table-header-bg);
    color: var(--table-text); */

/* } */

q-list .wrapper{
    /* padding-bottom:35px; */
    padding-bottom:var(--table-spacing-bottom);
}

/* q-list .wrapper table thead th{
padding: 10px 15px 10px;
} */

table>thead>tr>th {
    background-color: var(--table-header-bg);
    color: var(--table-text);
    /* box-shadow: var(--border-color) 1px 1px 1px 0px; */
    box-shadow: var(--table-header-shadow) 1px 1px 1px 0px;
    /* padding: 10px 15px 10px 10px; */
    padding: var(--table-header-padding);
        /* padding-right: 15px; */
    position: sticky;
    top: 0px;
    /* font-size: 13px; */
    font-size: var(--table-text-size);
    /* font-weight: 500; */
    font-weight:var(--table-text-weight);
    z-index: 0;
    white-space: nowrap;
    /* border-top: var(--q-bdr); */
    border-top: var(--table-border-style);
    cursor: pointer;

        /* background-color: var(--primary-color); */
  /* color: var(--dark-color); */
    /* background-color: var(--light-color); */
          /* padding-bottom: 5px; */
    /* added by piyush */

       /* color: var(--t-head); */
    /* border-bottom: 1px solid var(--t-head-border); */
    /* box-shadow: 0 1px 0px 0px; */
    /* added by piyush */
    /* background-color: #f1f1f1; */
    /* background-color: var(--bg-color); */
    /* background-color: #f3f6f9; */
    /* background-color: var(--q-h-bg-color); */
    /* color: var(--q-heading-color); */
}

.wrapper table>thead>tr>th:nth-child(1) {
    padding-left: var(--table-header-spacing);

}

.wrapper table>thead>tr>th:last-child {
    /* padding-right: 30px !important; */

    padding-right: var(--table-header-spacing) !important;
}

.wrapper tbody tr td:first-child {
    /* padding-left: 30px !important; */
    padding-left: var(--table-row-spacing) !important;
}

.wrapper tbody>tr>td:last-child {
    /* padding-right: 30px !important; */
    padding-right: var(--table-row-spacing) !important;
}

.wrapper tbody>tr:hover {

    background-color: var(--table-hover-bg) !important;

    color: var(--table-hover-text) !important;
}

.mnbx {
    /* background-color: var(--light-color); */
    background-color: var(--table-bg);
    border: var(--table-border-style);
    border-radius: var(--table-radius);
}

/* q-form.wrapper tbody > tr:hover {
    background-color: red;
} */

/* 13-06-2026 */

/* 14-06-2026 */

tbody>tr>td {
    /* border-bottom: 1px solid var(--border-color); */
    border-bottom:var(--table-border-style);
    white-space: nowrap;
      /* added by piyush */

    /* padding: 8px 0px; */
      /* added by piyush */
    /* border-bottom: 1px solid #e2e2e2; */
}

q-tarray table tbody td input,
q-tarray table tbody td select {
    /* border: none !important; */
    outline: none;
}

/* q-tarray .wrapper tbody>tr:hover {
    background-color: white !important;
    color: var(--secondary-color) !important;
} */

q-tarray table tbody input ,
q-tarray table tbody select{
    /* border: 1px solid var(--selected-border)!important; */
    border:var(--table-border-muted)!important ;
}

q-tarray table tbody tr td:nth-child(2){
    /* padding-left: 17px !important; */
    padding-left: var(--table-form-spacing) !important;
}

q-tarray .wrapper tr td:first-child{
    /* padding-left: 17px !important; */
    padding-left: var(--table-form-spacing) !important;
}

q-view .wrapper {
    /* padding-bottom:14px ; */
    padding-bottom:var(--table-form-spacing-bottom) ;
    margin-bottom: var(--view-mrgbttm);
}

/* -----------------------------------table----------------------------------------------- */

/* ----------------------------button----------------------------------------------------- */

.mm {
    background-color: var(--mm-bg);
    flex-direction: row;
    padding: 0;
    /* padding-left: 30px; */
}

.actv {
    background-color: var(--btn-btn-h);
    color: var(--btn-txt-h);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
}

.actv span {
    color: var(--btn-txt-h);
}

.mm button,
.mm button {
    width: 100%;
    color: var(--mm-txt);
    padding: 5px;
}

.mm button:hover,
.mm button:hover {
    background-color: var(--btn-btn-h);
    /* background-color: #00a09d; */
    color: var(--btn-txt-h);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.mm>q-button>q-box {
    z-index: 2;
    width: auto;
    background-color: var(--mm-bg);
    padding: 15px 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.mm>q-button>q-box>q-box>q-button {
    min-width: 150px;
    padding: 0;
}

.mm:focus {
    background-color: red;
}

button {
    letter-spacing: 1.2px;
    cursor: pointer;
    background-color: transparent;
    /* background: none; */
    outline: 0;
    line-height: 1;
    text-align: left;
    /* padding: 15px 5px; */
    font-size: 12px;
    /* added by piyush */
    /* font-weight: 500; */
    /* added by piyush */
    /* border-radius: 2px; */
    display: flex;
    border: none;
    color: var(--q-h-bg-color);
    /* color: white; */
    /* transition: background-color .3s, box-shadow .3s; */
    /*   width: 125px; */
    white-space: nowrap;

}

/* button:hover {
    background-color: #00a09d;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  } */

button:disabled {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}

button>span {
    /* padding: 8px 24px; */
    padding: var(--btn-padding);
    color: var(--secondary-color);
      /* added by piyush */
    /* added by piyush */
    /*     padding: 10px 25px; */
    /* border-radius: 20px; */
    /* color: white; */
    /* font-weight: bold; */
}

.mm button>span {
    /* padding: 8px 24px; */
    padding: var(--btn-padding);
    border: var(--btn-radius);
    /* border-radius: 20px; */
        /* padding: 10px 25px; */

    /* color: white; */
    /* font-weight: bold; */
}

.mm button>span:hover,
.dsktp button>span:hover {
    border: none;
}

/* button>span { */

/* font-weight: bold; */

/* border: 1px solid #257d7b; */

/* } */

.i-view-col-width>q-box>q-button>button>span,
.view>button>span {
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    /* background-color: var(--btn-); */
    /* background-color: var(--btn-filled-bg);
    color: var(--btn-filled-text); */
    /* background-color: var(--primary-color);
    color: var(--secondary-color); */

       /* background-color: #00a09d;
    color: white; */
    /* font-weight: bold; */
    /* background-color: var(--q-bg-color); */
    /* color: white; */
    /* border: 1px solid #257d7b; */
}

.download>button>span,
.export>button>span,
.import>button>span,
.filter>button>span,
.refresh>button>span {

    background-color: var(--btn-outlined-bg);
    color: var(--btn-outlined-border-text);
    border: var(--btn-outlined-border);
   
    /* background-color: #f9f9f9;
   
    color: var(--h-text-color);
    border: 1px solid var(--border-color); */
        /* added by piyush */

     /* added by piyush */
    /* color: var(--q-heading-color); */
     /* background-color: #257d7b;
    color: white;
    border: 1px solid #257d7b; */
    /* background-color: #607D8B; */
    /* font-weight: bold; */
}

.apply>button>span{

    background-color: var(--btn-outlined-bg);
    color: var(--btn-outlined-border-text);
    border: var(--btn-outlined-border);
    /* background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color); */
        /* background-color: green;
    color: white; */
    /* added by piyush */
    /* background-color: var(--q-bg-color);
    color: white;
    border: 1px solid var(--q-bg-color); */
    /* added by piyush */
}

.reset>button>span,
.close>button>span {
  
    color:var(--btn-filled-outlined-text);
    background-color:var(--btn-filled-outlined-bg) ;
    border:var(--btn-filled-outlined-border) ;
    /* color:var(--btn-filled-hover-text);
    background-color: var(--btn-filled-hover-bg );
    border: var(--btn-filled-border); */
    /* color: var(--btn-outlined-border-text);
    background-color: var(--btn-outlined-bg);
    border: var(--btn-outlined-border); */
    /* color: var(--secondary-color);
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color); */
    
   /* background-color: red;
    color: white; */
    /* added by piyush */
    /* color: var(--q-bg-color);
    border: 1px solid var(--q-bg-color); */
    /* added by piyush */
    /* font-weight: bold; */
}

/* .reset > button > span {
  
    color: #257d7b;
    border: 1px solid #257d7b;
} */

/* .apply > button > span {
    background-color: red;
    color: white;
} */

.Red {
    color: red;
    /* background-color: white; */
}

/* .delete > button > span:hover  {
    background-color: white !important;
    color: red !important;
  } */

.add>button>span ,
.submit>button>span{
    /* color: white;
    background-color: var(--q-success-color);
    border: 1px solid var(--q-success-color);
    font-weight: 400; */
        /* border: 1px solid var(--q-success-color); */
    background-color: var(--btn-filled-bg);
    font-weight: var(--btn-weight);
    color: var(--btn-filled-text);
    border: var(--btn-filled-border);
}

.add>button>span:hover ,
.submit>button>span:hover{
    color:var(--btn-filled-hover-text);
    background-color: var(--btn-filled-hover-bg );
    transition:var(--btn-transition);
    border: var(--btn-filled-hover-border);

}

button>span:hover {
    /* color:var(--btn-filled-hover-text);
    background-color: var(--btn-filled-hover-bg ); */

    /* color: var(--q-success-color);
    background-color: var(--q-bg-color); */
    /* color: var(--btn-filled-hover-text);
    background-color: var(--btn-filled-hover-bg);
    border: var(--btn-filled-border); */
    /* transition:var(--btn-transition); */

}

/* .add button>span:hover,
.download button>span:hover {
    border: 1px solid var(--q-success-color);
} */

td .add>button>span {
  
    /* background-color: white;
    color: var(--selected-color);
    border: none; */

    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: var(--btn-border-muted);
    padding: var(--padding-input);
      /* padding: 5px 15px; */
    /* added by piyush */
    /* added by piyush */
}

td .add>button>span:hover {
    /* padding: 5px 15px; */
    /* added by piyush */
    background-color: white;
    color: var(--selected-color);
    border: none;
    /* added by piyush */
}

td .delete>button>span {
    padding: 5px;
}

.delete>button>span {
    background-color: red;
    color: white;
}

.edit>button>span {
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    /* background-color: var(--q-bg-color);
    color: var(--h-text-color); */
        /* added by piyush */
    /* added by piyush */
    /* color: white; */
}

.child>button>span {
    /* color: var(--secondary-color); */
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
      /* background-color: var(--btn-btn-h);
    color: white; */
    /* added by piyush */
    /* border: 1px solid var(--secondary-color); */
    /* background-color: var(--primary-color); */
    /* added by piyush */
}

.actn-bar q-button {
    display: flex;
    align-items: center;

}

.actn-bar q-button button {
    line-height: .25;
    /* border: var(--btn-outlined-border); */
    /* added by piyush */
    /* border: 1px solid var(--secondary-color); */
    /* added by piyush */
}

.actn-bar q-button>button>span {

    color: var(--btn-outlined-border-text);
    border: var(--btn-outlined-border);
    background-color: var(--btn-outlined-bg);
    /* color: var(--q-bg-color);
    background-color: var(--q-h-bg-color);
    border: 1px solid var(--q-bg-color); */
        /* added by piyush */
     /* background-color: #dbdce7; */
    /* added by piyush */
}

/* ----------------------------button----------------------------------------------------- */

.pddup{
padding: var(--padding-pl) var(--padding-pl) 0px var(--padding-pl);
}

.pddwn{
    padding: 0px var(--padding-pl) var(--padding-pl) var(--padding-pl);

}

.ppsd{
    padding: 0px var(--padding-pl);
}

/* q-tarray table tbody tr td{
    padding-top: 3px !important;
} */

/* 18-06-2026 */

/* 18-06-2026 */

/* q-tarray table tbody tr td button>.material-icons{
    padding: 5px 25px !important;
} */

/* 14-06-2026 */

/* 19-06-2026 */

/* q-tarray table tbody td:first-child{
        padding-left: 20px !important;
    } */

/* q-tarray table tbody q-select:first-child {
    padding-left: 15px !important;
} */

/* q-taaray table tbody input{
    border: 1px solid var(--selected-border);

} */

.bgfrm{
    background-color: var(--light-color);
    border: var(--q-bdr);
    border-radius: var(--q-bdr-radius);
}

/* search----------------------------------------> */

.searchcontainer {
    display: inline-flex;
    border: 1px solid var(--border-color);
    /* border-radius: var(--border-radius); */
    border-radius:var(--searchbox-radius);
    /* color: var(--secondary-color); */
    color: var(--bg-secondary);
  }

.inputwrapper {
    padding: 6px 10px;
  }

.subinputcontainer {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.subinputcontainer i {
    font-size: var(--searchbox-size);
    /* font-size: 16px;
    color: var(--bg-secondary); */
  
  }

.dropdowncontainer {
    background-color: #f9f9f9;
    border-radius: 0px 6px 6px 0px;
    padding: 3px 5px;
    border: var(--q-bdr);
    border-width: 0px 0px 0px 1px;
    display: flex;
    align-items: center;
    color: var(--bg-secondary);
  }

.dropdowncontainer i {
    font-size: var(--searchbox-size);
  }

.subinputcontainer input[type="text"] {
    /* border: none; */
    /* font-size: 14px; */
    border: var(--searchbox-border-muted);
    font-size: var(--searchbox-input-size);
    width:280px;
  }

.subinputcontainer input[type="text"]:focus {
    outline: none;
  }

.inputglobalsearch{
    background-color: var(--light-color);
    /* border-radius: var(--brdrds-6px); */
    border-radius: var(--globalsearch-radius);
    padding: 10px 10px;

  }

.req .frmtbl  .wrapper th{
    border-top:0;
  
  }

.req .frmtbl .wrapper {
    border-radius: var(--q-bdr-radius);
  }

/* --------------------------------------------Header section---------------------------------------- */

/* --------------------------------------------Header section---------------------------------------- */

/* search------------b--------------------------------------->*/

/* 19-06-2026 */