/* 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: white;
    --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: #405189;
    /* 101d94; */
    /* --q-h-bg-color: #f1f1f1; */
    --q-h-bg-color: #f3f3f9;
    --q-bg-transparent: #9e9e9e61;
    --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: #0ab39c;

}

.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;
    /* -webkit-font-smoothing: antialiased; */
    margin: 0;
    padding: 0;
}

/* 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: 0 17px;
}

.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);
    /* #ff4a56;*/
    /* font-weight: 100; */
    letter-spacing: 0.01em;
    font-size: 11px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 4px;
    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-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;
    padding: 0 0 4px 0;
}

.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 .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;
}

.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;
}

.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(:-ms-input-placeholder):not(:focus)~label, .i-form .i-field textarea:not(:-ms-input-placeholder):not(:focus)~label, .i-form .i-field input[type="password"]:not(:-ms-input-placeholder):not(:focus)~label, .i-form .i-field input[type="date"]:not(:-ms-input-placeholder):not(:focus)~label, .i-form .i-field input[type="time"]:not(:-ms-input-placeholder):not(:focus)~label, .i-form .i-field select:not(:-ms-input-placeholder):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: 40px;
}

.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;
}

.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;
    -ms-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);
}

/* .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);
    -webkit-backface-visibility: hidden;
    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;
}

.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-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: 15px;
}

.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);*/
    /*box-shadow:0 2px 4px 0 rgba(0,0,0,.08);*/
    box-shadow: 0px 1px 4px 1px 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(--bg-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 {
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
    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 {
    background-color: rgb(228, 228, 228);
}

.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: white;
    /* #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);
    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(:-ms-input-placeholder):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 select:not(:-ms-input-placeholder):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);
    -webkit-backface-visibility: hidden;
    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: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

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

.i-menu-item {
    font-size: 11px;
    padding: 0;
    /* 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); */
    color: var(--q-heading-color);
    /* opacity: .6; */
    padding: 10px 32px 10px 32px;
}

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

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

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

.i-menu-item:hover {
    background-color: var(--q-h-bg-color);
    z-index: 1;
}

.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;
}

/* 

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;
    }
}

@media print {
    @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;
}

.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;
    font-weight: 500;
    /* 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: 10px 25px; */
    /* border-radius: 20px; */
    /* color: white; */
    /* font-weight: bold; */
}

.mm button>span {
    padding: 8px 24px;
    /* padding: 10px 25px; */
    border-radius: 20px;
    /* 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: #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: #257d7b;
    color: white;
    border: 1px solid #257d7b; */
    /* background-color: #607D8B; */
    /* font-weight: bold; */
    background-color: #f9f9f9;
    color: var(--q-heading-color);
    border: 1px solid var(--border-color);
}

.apply>button>span,
.submit>button>span {
    /* background-color: green;
    color: white; */
    background-color: var(--q-bg-color);
    color: white;
    border: 1px solid var(--q-bg-color);
}

.reset>button>span,
.close>button>span {
    /* background-color: red;
    color: white; */
    color: var(--q-bg-color);
    /* font-weight: bold; */
    border: 1px solid var(--q-bg-color);
}

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

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

.add>button>span {
    /* background-color: green; */
    color: white;
    background-color: var(--q-success-color);
    border: 1px solid var(--q-success-color);
    font-weight: 400;
}

button>span:hover {
    color: white;
    background-color: var(--q-bg-color);
    transition: 0.4s;

}

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

td .add>button>span {
    padding: 5px 15px;
}

td .delete>button>span {
    padding: 5px;
}

.delete>button>span {
    background-color: red;
    color: white;
}

.edit>button>span {
    background-color: var(--q-bg-color);
    color: white;
}

.child>button>span {
    background-color: var(--btn-btn-h);
    color: white;
}

.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 {
    width: 50%;
    /*     max-height: calc(100% - 90px); */
}

.popup>.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;
}

/* .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 {
    flex: 1 0 0%;
}

.popup {
    /* height: 100%; */
    position: absolute;
    top: 0px;
    /* color: black; */
    background: #00000018;
    /* background: var(--q-bg-transparent); */
    z-index: 2;
    width: 100%;
    overflow: auto;
}

.popup>q-box {
    /* 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 {
    float: right;
    border: 0px;
    /* border-left: 1px solid var(--q-bg-color); */
    height: 100vh;
    width: 800px !important;
}

.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;
}

.lay_0 .popup>q-box {
    box-shadow: #0000003d 0 3px 8px;
    -webkit-animation: slideIn var(--transition);
            animation: slideIn var(--transition);
    transition: var(--transition);
}

.lay_0 .popup>.form>q-box {
    padding: 11.5px 30px;
}

.lay_1 .popup>q-box,
/* .filter > q-box>q-box, */
.lay_0 .popup>.form {
    float: unset;
    box-shadow: #0000003d 0 3px 8px;
    -webkit-animation: slideOn var(--transition);
            animation: slideOn var(--transition);
    transition: var(--transition);
}

.lay_0 .popup>.form {
    margin: auto;

}

@-webkit-keyframes slideIn {
    0% {
        opacity: .5;
        transform: translatex(400px);
    }

    100% {
        opacity: 1;
        transform: translatex(0);
    }
}

@keyframes slideIn {
    0% {
        opacity: .5;
        transform: translatex(400px);
    }

    100% {
        opacity: 1;
        transform: translatex(0);
    }
}

@-webkit-keyframes slideOn {
    0% {
        opacity: .5;
        transform: translatey(-400px);
    }

    100% {
        opacity: 1;
        transform: translatey(0);
    }
}

@keyframes slideOn {
    0% {
        opacity: .5;
        transform: translatey(-400px);
    }

    100% {
        opacity: 1;
        transform: translatey(0);
    }
}

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

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

.popup>q-box>q-box:nth-child(2) {
    /*   background: red; */
    overflow: auto;
    height: inherit;
}

.popup>q-box>q-box:nth-child(3),
.popup>q-box>q-box:last-child {
    padding: 15px 30px;
    width: calc(100% - 60px);
    background-color: white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    align-items: center;
    border-top: 1px solid var(--q-bg-color);
    /* 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-select {
    /*  padding: 10px; */
    /* padding: 5px 10px 5px; */
    padding: 5px 0;
    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 {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    flex: 1;
    align-items: center;
}

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

q-form {
    padding: 30px;
    width: calc(100% - 60px);
    overflow: auto !important;
    /* 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-input>div>span {
    min-width: 150px;
    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: 20px 30px 10px 30px;
    width: calc(100% - 60px);
    background-color: var(--q-h-bg-color);
    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;
    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;
}

.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;
    -ms-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);
    -webkit-backface-visibility: hidden;
    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 {
    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%;
    height: calc(100% - 90px);
}

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: 24px;
    font-weight: bold;
    padding: 0 30px;
    line-height: 59px;
    color: #f1f1f1;
    background-color: var(--q-bg-color);
}

.vw>.actn>:last-child * {
    padding: 0;
}

@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 {
        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 {
        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-select>:last-child span {
        display: none;
    }

    .popup>.s {
        max-height: -webkit-fit-content;
        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 {
    padding: 0px;
    font-weight: bold;
    /*  min-width: 80px; */
    align-items: center;
    color: var(--q-stts-color);
    /*     color: #868686; */
}

.sts-lbl i,
.sts-lbl span {
    font-weight: bold;
    line-height: 24px;
    font-size: 13px;
    padding: 5px;
}

.stts {
    display: contents;
    /* background-color: var(--q-bg-color); */
}

.s-green {
    color: green;
}

.s-red {
    color: #cf0303;
}

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

.dynamic-form .content-title {
    font-size: 13px;
    font-weight: bold;
}

.dn {
    display: none;
}

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

.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);
}

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

.actn-bar q-button {
    display: flex;
    align-items: center;
}

.actn-bar q-button button {
    line-height: .25;
}

.actn-bar q-button>button>span {
    color: var(--q-bg-color);
    /* background-color: #dbdce7; */
    background-color: var(--q-h-bg-color);
    ;
    border: 1px solid var(--q-bg-color);
}

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

.p-30 {
    padding: 30px;
}

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;
}

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 {
    padding: 0 10px;
    text-transform: uppercase;
    color: var(--q-stts-color);
    font-size: 14px;
    font-weight: bold;
}

.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-select {
    width: 50%;
}

.v-field q-select: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;
}

.terms {
    flex-direction: row;
}

.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: 10px;
}

.mis_fls {
    top: 14px;

}

.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;
}

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

@-webkit-keyframes slideMenu {

    0% {
        width: 0px;
    }

    100% {
        width: -250px;
    }
}

@keyframes slideMenu {

    0% {
        width: 0px;
    }

    100% {
        width: -250px;
    }
}

.vw-bar {
    overflow: auto;
}

.mm {
    -webkit-animation-name: slideMenu;
            animation-name: slideMenu;
    -webkit-animation-duration: .5s;
            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%;
}

.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%;
}

@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;
}

.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,
.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;
}

.lay_0 .popup>q-box>q-box:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.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%;
}

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

q-view q-box>q-formview {
    width: auto;
}

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

.pm {
    padding: 0px 10px;
}