:root {
  --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --bgc-pri: #0078d4;
  /*--bgc-pri:#9B59B6;*/
  --bgc-sec: #B573D0;
  --bgc-ter: #1a84ff;
  /*--bgc-ter:#C17FDC;*/
  --fc-pri: #fff;
  --fc-sec: #fff;
  --fc-ter: #fff;
  --br-pri: #0080ff;
  /*--br-pri: #8f4bab;*/
  --br-sec: #9B59B6;
  --br-ter: #B573D0;
  --font-size: 13px;
}
/* keep insync with platform.js */
/***********STYLE START**************/
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: NunitoSans, sans-serif;
}
html,
body {
  font-size: var(--font-size);
  letter-spacing: 0.3px;
  width: 100%;
  height: 100%;
}
input {
  font-size: var(--font-size);
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  flex-direction: column;
  min-height: 100vh;
  /*  background-image: url("../isl/bottom_bg.svg");
    background-repeat: repeat-y; 
    background-position: bottom;  */
}
.bodyContainer {
  height: 100%;
  width: 100%;
  overflow-x: auto !important;
  overflow-y: auto !important;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
a {
  color: #4e73df;
  text-decoration: none;
  background-color: transparent;
}
* {
  outline: none;
}
.f200 {
  font-weight: 200 !important;
}
.f300 {
  font-weight: 300 !important;
}
.f400,
.fNormal {
  font-weight: 400 !important;
}
.f500 {
  font-weight: 500 !important;
}
.f600,
.fBold {
  font-weight: 600 !important;
}
.f700 {
  font-weight: 700 !important;
}
.f800 {
  font-weight: 800 !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mF200 {
    font-weight: 200 !important;
  }
  .mF300 {
    font-weight: 300 !important;
  }
  .mF400,
  .mFNormal {
    font-weight: 400 !important;
  }
  .mF500 {
    font-weight: 500 !important;
  }
  .mF600,
  .mFBold {
    font-weight: 600 !important;
  }
  .mF700 {
    font-weight: 700 !important;
  }
  .mF800 {
    font-weight: 800 !important;
  }
}
@media screen and (max-width: 649px) {
  .sF200 {
    font-weight: 200 !important;
  }
  .sF300 {
    font-weight: 300 !important;
  }
  .sF400,
  .sFNormal {
    font-weight: 400 !important;
  }
  .sF500 {
    font-weight: 500 !important;
  }
  .sF600,
  .sFBold {
    font-weight: 600 !important;
  }
  .sF700 {
    font-weight: 700 !important;
  }
  .sF800 {
    font-weight: 800 !important;
  }
}
.fItalic {
  font-style: italic !important;
}
.textLowercase {
  text-transform: lowercase !important;
}
.textUppercase {
  text-transform: uppercase !important;
}
.textCapitalize {
  text-transform: capitalize !important;
}
.textTransNone {
  text-transform: none !important;
}
.tod,
.textOverflowDoted {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.textUnderline {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
}
.textStrike {
  text-decoration: line-through !important;
}
.textNoUnderline {
  text-decoration: none !important;
}
.textNoWrap {
  white-space: nowrap;
}
.showNewLines {
  white-space: break-spaces;
}
.hideValue {
  position: relative;
}
.hideValue:before {
  content: "******************************************";
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  /* margin: 2px; */
  /*border: 2px solid white;*/
  overflow: hidden;
}
.ofAuto {
  overflow: auto !important;
}
.ofHidden {
  overflow: hidden !important;
}
.ofVisible {
  overflow: visible !important;
}
.ofScroll {
  overflow: scroll !important;
}
.ofxAuto {
  overflow-x: auto !important;
}
.ofxHidden {
  overflow-x: hidden !important;
}
.ofxVisible {
  overflow-x: visible !important;
}
.ofxScroll {
  overflow-x: scroll !important;
}
.ofyAuto {
  overflow-y: auto !important;
}
.ofyHidden {
  overflow-y: hidden !important;
}
.ofyVisible {
  overflow-y: visible !important;
}
.ofyScroll {
  overflow-y: scroll !important;
}
@media screen and (min-width: 1000px) {
  .bOfAuto {
    overflow: auto !important;
  }
  .bOfHidden {
    overflow: hidden !important;
  }
  .bOfVisible {
    overflow: visible !important;
  }
  .bOfScroll {
    overflow: scroll !important;
  }
  .bOfxAuto {
    overflow-x: auto !important;
  }
  .bOfxHidden {
    overflow-x: hidden !important;
  }
  .bOfxVisible {
    overflow-x: visible !important;
  }
  .bOfxScroll {
    overflow-x: scroll !important;
  }
  .bOfyAuto {
    overflow-y: auto !important;
  }
  .bOfyHidden {
    overflow-y: hidden !important;
  }
  .bOfyVisible {
    overflow-y: visible !important;
  }
  .bOfyScroll {
    overflow-y: scroll !important;
  }
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mOfAuto {
    overflow: auto !important;
  }
  .mOfHidden {
    overflow: hidden !important;
  }
  .mOfVisible {
    overflow: visible !important;
  }
  .mOfScroll {
    overflow: scroll !important;
  }
  .mOfxAuto {
    overflow-x: auto !important;
  }
  .mOfxHidden {
    overflow-x: hidden !important;
  }
  .mOfxVisible {
    overflow-x: visible !important;
  }
  .mOfxScroll {
    overflow-x: scroll !important;
  }
  .mOfyAuto {
    overflow-y: auto !important;
  }
  .mOfyHidden {
    overflow-y: hidden !important;
  }
  .mOfyVisible {
    overflow-y: visible !important;
  }
  .mOfyScroll {
    overflow-y: scroll !important;
  }
}
@media screen and (max-width: 649px) {
  .sOfAuto {
    overflow: auto !important;
  }
  .sOfHidden {
    overflow: hidden !important;
  }
  .sOfVisible {
    overflow: visible !important;
  }
  .sOfScroll {
    overflow: scroll !important;
  }
  .sOfxAuto {
    overflow-x: auto !important;
  }
  .sOfxHidden {
    overflow-x: hidden !important;
  }
  .sOfxVisible {
    overflow-x: visible !important;
  }
  .sOfxScroll {
    overflow-x: scroll !important;
  }
  .sOfyAuto {
    overflow-y: auto !important;
  }
  .sOfyHidden {
    overflow-y: hidden !important;
  }
  .sOfyVisible {
    overflow-y: visible !important;
  }
  .sOfyScroll {
    overflow-y: scroll !important;
  }
}
.fl {
  float: left !important;
}
.fr {
  float: right !important;
  justify-content: flex-end;
}
.fn {
  float: none !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mFl {
    float: left !important;
  }
  .mFr {
    float: right !important;
    justify-content: flex-end;
  }
  .mFn {
    float: none !important;
  }
}
@media screen and (max-width: 649px) {
  .sFl {
    float: left !important;
  }
  .sFr {
    float: right !important;
    justify-content: flex-end;
  }
  .sFn {
    float: none !important;
  }
}
.b0 {
  border: 0px !important;
}
.bl0 {
  border-left: 0px !important;
}
.br0 {
  border-right: 0px !important;
}
.bt0 {
  border-top: 0px !important;
}
.bb0 {
  border-bottom: 0px !important;
}
.blRad0 {
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
}
.brRad0 {
  border-bottom-right-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
@media screen and (min-width: 1000px) {
  .bB0 {
    border: 0px !important;
  }
  .bBl0 {
    border-left: 0px !important;
  }
  .bBr0 {
    border-right: 0px !important;
  }
  .bBt0 {
    border-top: 0px !important;
  }
  .bBb0 {
    border-bottom: 0px !important;
  }
  .bBlRad0 {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }
  .bBrRad0 {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mB0 {
    border: 0px !important;
  }
  .mBl0 {
    border-left: 0px !important;
  }
  .mBr0 {
    border-right: 0px !important;
  }
  .mBt0 {
    border-top: 0px !important;
  }
  .mBb0 {
    border-bottom: 0px !important;
  }
  .mBlRad0 {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }
  .mBrRad0 {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
}
@media screen and (max-width: 649px) {
  .sB0 {
    border: 0px !important;
  }
  .sBl0 {
    border-left: 0px !important;
  }
  .sBr0 {
    border-right: 0px !important;
  }
  .sBt0 {
    border-top: 0px !important;
  }
  .sBb0 {
    border-bottom: 0px !important;
  }
  .sBlRad0 {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }
  .sBrRad0 {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
}
.b1Dashed {
  border: 1px dashed var(--bgc-pri);
}
.bt1Dashed {
  border-top: 1px dashed var(--bgc-pri);
}
.br1Dashed {
  border-right: 1px dashed var(--bgc-pri);
}
.bb1Dashed {
  border-bottom: 1px dashed var(--bgc-pri);
}
.bl1Dashed {
  border-left: 1px dashed var(--bgc-pri);
}
.bx1Dashed {
  border-left: 1px dashed var(--bgc-pri);
  border-right: 1px solid var(--bgc-pri);
}
.by1Dashed {
  border-top: 1px dashed var(--bgc-pri);
  border-bottom: 1px solid var(--bgc-pri);
}
.b1Dotted {
  border: 1px dotted var(--bgc-pri);
}
.bt1Dotted {
  border-top: 1px dotted var(--bgc-pri);
}
.br1Dotted {
  border-right: 1px dotted var(--bgc-pri);
}
.bb1Dotted {
  border-bottom: 1px dotted var(--bgc-pri);
}
.bl1Dotted {
  border-left: 1px dotted var(--bgc-pri);
}
.bx1Dotted {
  border-left: 1px dotted var(--bgc-pri);
  border-right: 1px solid var(--bgc-pri);
}
.by1Dotted {
  border-top: 1px dotted var(--bgc-pri);
  border-bottom: 1px solid var(--bgc-pri);
}
.b1 {
  border: 1px solid var(--bgc-pri);
}
.bt1 {
  border-top: 1px solid var(--bgc-pri);
}
.br1 {
  border-right: 1px solid var(--bgc-pri);
}
.bb1 {
  border-bottom: 1px solid var(--bgc-pri);
}
.bl1 {
  border-left: 1px solid var(--bgc-pri);
}
.bx1 {
  border-left: 1px solid var(--bgc-pri);
  border-right: 1px solid var(--bgc-pri);
}
.by1 {
  border-top: 1px solid var(--bgc-pri);
  border-bottom: 1px solid var(--bgc-pri);
}
.b2 {
  border: 2px solid var(--bgc-pri);
}
.bt2 {
  border-top: 2px solid var(--bgc-pri);
}
.br2 {
  border-right: 2px solid var(--bgc-pri);
}
.bb2 {
  border-bottom: 2px solid var(--bgc-pri);
}
.bl2 {
  border-left: 2px solid var(--bgc-pri);
}
.bx2 {
  border-left: 2px solid var(--bgc-pri);
  border-right: 2px solid var(--bgc-pri);
}
.by2 {
  border-top: 2px solid var(--bgc-pri);
  border-bottom: 2px solid var(--bgc-pri);
}
.b3 {
  border: 3px solid var(--bgc-pri);
}
.bt3 {
  border-top: 3px solid var(--bgc-pri);
}
.br3 {
  border-right: 3px solid var(--bgc-pri);
}
.bb3 {
  border-bottom: 3px solid var(--bgc-pri);
}
.bl3 {
  border-left: 3px solid var(--bgc-pri);
}
.bx3 {
  border-left: 3px solid var(--bgc-pri);
  border-right: 3px solid var(--bgc-pri);
}
.by3 {
  border-top: 3px solid var(--bgc-pri);
  border-bottom: 3px solid var(--bgc-pri);
}
.b1Gray {
  border: 1px solid #b9b9b9  !important;
}
.bt1Gray {
  border-top: 1px solid #b9b9b9  !important;
}
.br1Gray {
  border-right: 1px solid #b9b9b9  !important;
}
.bb1Gray {
  border-bottom: 1px solid #b9b9b9  !important;
}
.bl1Gray {
  border-left: 1px solid #b9b9b9  !important;
}
.bx1Gray {
  border-left: 1px solid #b9b9b9  !important;
  border-right: 1px solid #b9b9b9  !important;
}
.by1Gray {
  border-top: 1px solid #b9b9b9  !important;
  border-bottom: 1px solid #b9b9b9  !important;
}
.b1White {
  border: 1px solid #fff !important;
}
.bt1White {
  border-top: 1px solid #fff !important;
}
.br1White {
  border-right: 1px solid #fff !important;
}
.bb1White {
  border-bottom: 1px solid #fff !important;
}
.bl1White {
  border-left: 1px solid #fff !important;
}
.bx1White {
  border-left: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
}
.by1White {
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
}
.b2Gray {
  border: 2px solid #b9b9b9  !important;
}
.bt2Gray {
  border-top: 2px solid #b9b9b9  !important;
}
.br2Gray {
  border-right: 2px solid #b9b9b9  !important;
}
.bb2Gray {
  border-bottom: 2px solid #b9b9b9  !important;
}
.bl2Gray {
  border-left: 2px solid #b9b9b9  !important;
}
.bx2Gray {
  border-left: 2px solid #b9b9b9  !important;
  border-right: 2px solid #b9b9b9  !important;
}
.by2Gray {
  border-top: 2px solid #b9b9b9  !important;
  border-bottom: 2px solid #b9b9b9  !important;
}
.b3Gray {
  border: 3px solid #b9b9b9  !important;
}
.bt3Gray {
  border-top: 3px solid #b9b9b9  !important;
}
.br3Gray {
  border-right: 3px solid #b9b9b9  !important;
}
.bb3Gray {
  border-bottom: 3px solid #b9b9b9  !important;
}
.bl3Gray {
  border-left: 3px solid #b9b9b9  !important;
}
.bx3Gray {
  border-left: 3px solid #b9b9b9  !important;
  border-right: 3px solid #b9b9b9  !important;
}
.by3Gray {
  border-top: 3px solid #b9b9b9  !important;
  border-bottom: 3px solid #b9b9b9  !important;
}
.m0 {
  margin: 0 !important;
}
.m1 {
  margin: 0.25rem !important;
}
.m2 {
  margin: 0.5rem !important;
}
.m3 {
  margin: 1rem !important;
}
.m4 {
  margin: 1.5rem !important;
}
.m5 {
  margin: 3rem !important;
}
.mAuto {
  margin: auto !important;
}
.mx0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.mx1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.mx2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.mx3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.mx4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.mx5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.mxAuto {
  margin-right: auto !important;
  margin-left: auto !important;
}
.my0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.my1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.my2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.my5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.myAuto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt1 {
  margin-top: 0.25rem !important;
}
.mt2 {
  margin-top: 0.5rem !important;
}
.mt3 {
  margin-top: 1rem !important;
}
.mt4 {
  margin-top: 1.5rem !important;
}
.mt5 {
  margin-top: 3rem !important;
}
.mtAuto {
  margin-top: auto !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr1 {
  margin-right: 0.25rem !important;
}
.mr2 {
  margin-right: 0.5rem !important;
}
.mr3 {
  margin-right: 1rem !important;
}
.mr4 {
  margin-right: 1.5rem !important;
}
.mr5 {
  margin-right: 3rem !important;
}
.mrAuto {
  margin-right: auto !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb1 {
  margin-bottom: 0.25rem !important;
}
.mb2 {
  margin-bottom: 0.5rem !important;
}
.mb3 {
  margin-bottom: 1rem !important;
}
.mb4 {
  margin-bottom: 1.5rem !important;
}
.mb5 {
  margin-bottom: 3rem !important;
}
.mbAuto {
  margin-bottom: auto !important;
}
.ml0 {
  margin-left: 0 !important;
}
.ml1 {
  margin-left: 0.25rem !important;
}
.ml2 {
  margin-left: 0.5rem !important;
}
.ml3 {
  margin-left: 1rem !important;
}
.ml4 {
  margin-left: 1.5rem !important;
}
.ml5 {
  margin-left: 3rem !important;
}
.mlAuto {
  margin-left: auto !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mB0 {
    border: 0px !important;
  }
  .mB1 {
    border: 1px solid var(--bgc-pri);
  }
  .mBt1 {
    border-top: 1px solid var(--bgc-pri);
  }
  .mBr1 {
    border-right: 1px solid var(--bgc-pri);
  }
  .mBb1 {
    border-bottom: 1px solid var(--bgc-pri);
  }
  .mBl1 {
    border-left: 1px solid var(--bgc-pri);
  }
  .mM0 {
    margin: 0 !important;
  }
  .mM1 {
    margin: 0.25rem !important;
  }
  .mM2 {
    margin: 0.5rem !important;
  }
  .mM3 {
    margin: 1rem !important;
  }
  .mM4 {
    margin: 1.5rem !important;
  }
  .mM5 {
    margin: 3rem !important;
  }
  .mMAuto {
    margin: auto !important;
  }
  .mMx0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mMx1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mMx2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mMx3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mMx4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mMx5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mMxAuto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .mMy0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mMy1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mMy2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .mMy3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mMy4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .mMy5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mMyAuto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mMt0 {
    margin-top: 0 !important;
  }
  .mMt1 {
    margin-top: 0.25rem !important;
  }
  .mMt2 {
    margin-top: 0.5rem !important;
  }
  .mMt3 {
    margin-top: 1rem !important;
  }
  .mMt4 {
    margin-top: 1.5rem !important;
  }
  .mMt5 {
    margin-top: 3rem !important;
  }
  .mMtAuto {
    margin-top: auto !important;
  }
  .mMr0 {
    margin-right: 0 !important;
  }
  .mMr1 {
    margin-right: 0.25rem !important;
  }
  .mMr2 {
    margin-right: 0.5rem !important;
  }
  .mMr3 {
    margin-right: 1rem !important;
  }
  .mMr4 {
    margin-right: 1.5rem !important;
  }
  .mMr5 {
    margin-right: 3rem !important;
  }
  .mMrAuto {
    margin-right: auto !important;
  }
  .mMb0 {
    margin-bottom: 0 !important;
  }
  .mMb1 {
    margin-bottom: 0.25rem !important;
  }
  .mMb2 {
    margin-bottom: 0.5rem !important;
  }
  .mMb3 {
    margin-bottom: 1rem !important;
  }
  .mMb4 {
    margin-bottom: 1.5rem !important;
  }
  .mMb5 {
    margin-bottom: 3rem !important;
  }
  .mMbAuto {
    margin-bottom: auto !important;
  }
  .mMl0 {
    margin-left: 0 !important;
  }
  .mMl1 {
    margin-left: 0.25rem !important;
  }
  .mMl2 {
    margin-left: 0.5rem !important;
  }
  .mMl3 {
    margin-left: 1rem !important;
  }
  .mMl4 {
    margin-left: 1.5rem !important;
  }
  .mMl5 {
    margin-left: 3rem !important;
  }
  .mMlAuto {
    margin-left: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .sB0 {
    border: 0px !important;
  }
  .sB1 {
    border: 1px solid var(--bgc-pri);
  }
  .sBt1 {
    border-top: 1px solid var(--bgc-pri);
  }
  .sBr1 {
    border-right: 1px solid var(--bgc-pri);
  }
  .sBb1 {
    border-bottom: 1px solid var(--bgc-pri);
  }
  .sBl1 {
    border-left: 1px solid var(--bgc-pri);
  }
  .sM0 {
    margin: 0 !important;
  }
  .sM1 {
    margin: 0.25rem !important;
  }
  .sM2 {
    margin: 0.5rem !important;
  }
  .sM3 {
    margin: 1rem !important;
  }
  .sM4 {
    margin: 1.5rem !important;
  }
  .sM5 {
    margin: 3rem !important;
  }
  .sMAuto {
    margin: auto !important;
  }
  .sMx0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .sMx1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .sMx2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .sMx3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .sMx4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .sMx5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .sMxAuto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .sMy0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .sMy1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .sMy2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .sMy3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .sMy4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .sMy5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .sMyAuto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .sMt0 {
    margin-top: 0 !important;
  }
  .sMt1 {
    margin-top: 0.25rem !important;
  }
  .sMt2 {
    margin-top: 0.5rem !important;
  }
  .sMt3 {
    margin-top: 1rem !important;
  }
  .sMt4 {
    margin-top: 1.5rem !important;
  }
  .sMt5 {
    margin-top: 3rem !important;
  }
  .sMtAuto {
    margin-top: auto !important;
  }
  .sMr0 {
    margin-right: 0 !important;
  }
  .sMr1 {
    margin-right: 0.25rem !important;
  }
  .sMr2 {
    margin-right: 0.5rem !important;
  }
  .sMr3 {
    margin-right: 1rem !important;
  }
  .sMr4 {
    margin-right: 1.5rem !important;
  }
  .sMr5 {
    margin-right: 3rem !important;
  }
  .sMrAuto {
    margin-right: auto !important;
  }
  .sMb0 {
    margin-bottom: 0 !important;
  }
  .sMb1 {
    margin-bottom: 0.25rem !important;
  }
  .sMb2 {
    margin-bottom: 0.5rem !important;
  }
  .sMb3 {
    margin-bottom: 1rem !important;
  }
  .sMb4 {
    margin-bottom: 1.5rem !important;
  }
  .sMb5 {
    margin-bottom: 3rem !important;
  }
  .sMbAuto {
    margin-bottom: auto !important;
  }
  .sMl0 {
    margin-left: 0 !important;
  }
  .sMl1 {
    margin-left: 0.25rem !important;
  }
  .sMl2 {
    margin-left: 0.5rem !important;
  }
  .sMl3 {
    margin-left: 1rem !important;
  }
  .sMl4 {
    margin-left: 1.5rem !important;
  }
  .sMl5 {
    margin-left: 3rem !important;
  }
  .sMlAuto {
    margin-left: auto !important;
  }
}
.p1px {
  padding: 1px !important;
}
.p2px {
  padding: 2px !important;
}
.p0 {
  padding: 0 !important;
}
.p1 {
  padding: 0.25rem !important;
}
.p2 {
  padding: 0.5rem !important;
}
.p3 {
  padding: 1rem !important;
}
.p4 {
  padding: 1.5rem !important;
}
.p5 {
  padding: 3rem !important;
}
.px0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.px1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.px2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.px3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.px4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.px5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
.py0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.py5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pt1 {
  padding-top: 0.25rem !important;
}
.pt2 {
  padding-top: 0.5rem !important;
}
.pt3 {
  padding-top: 1rem !important;
}
.pt4 {
  padding-top: 1.5rem !important;
}
.pt5 {
  padding-top: 3rem !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pr1 {
  padding-right: 0.25rem !important;
}
.pr2 {
  padding-right: 0.5rem !important;
}
.pr3 {
  padding-right: 1rem !important;
}
.pr4 {
  padding-right: 1.5rem !important;
}
.pr5 {
  padding-right: 3rem !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pb1 {
  padding-bottom: 0.25rem !important;
}
.pb2 {
  padding-bottom: 0.5rem !important;
}
.pb3 {
  padding-bottom: 1rem !important;
}
.pb4 {
  padding-bottom: 1.5rem !important;
}
.pb5 {
  padding-bottom: 3rem !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pl1 {
  padding-left: 0.25rem !important;
}
.pl2 {
  padding-left: 0.5rem !important;
}
.pl3 {
  padding-left: 1rem !important;
}
.pl4 {
  padding-left: 1.5rem !important;
}
.pl5 {
  padding-left: 3rem !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mP0 {
    padding: 0 !important;
  }
  .mP1 {
    padding: 0.25rem !important;
  }
  .mP2 {
    padding: 0.5rem !important;
  }
  .mP3 {
    padding: 1rem !important;
  }
  .mP4 {
    padding: 1.5rem !important;
  }
  .mP5 {
    padding: 3rem !important;
  }
  .mPx0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .mPx1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .mPx2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .mPx3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .mPx4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .mPx5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .mPy0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .mPy1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .mPy2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .mPy3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .mPy4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .mPy5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .mPt0 {
    padding-top: 0 !important;
  }
  .mPt1 {
    padding-top: 0.25rem !important;
  }
  .mPt2 {
    padding-top: 0.5rem !important;
  }
  .mPt3 {
    padding-top: 1rem !important;
  }
  .mPt4 {
    padding-top: 1.5rem !important;
  }
  .mPt5 {
    padding-top: 3rem !important;
  }
  .mPr0 {
    padding-right: 0 !important;
  }
  .mPr1 {
    padding-right: 0.25rem !important;
  }
  .mPr2 {
    padding-right: 0.5rem !important;
  }
  .mPr3 {
    padding-right: 1rem !important;
  }
  .mPr4 {
    padding-right: 1.5rem !important;
  }
  .mPr5 {
    padding-right: 3rem !important;
  }
  .mPb0 {
    padding-bottom: 0 !important;
  }
  .mPb1 {
    padding-bottom: 0.25rem !important;
  }
  .mPb2 {
    padding-bottom: 0.5rem !important;
  }
  .mPb3 {
    padding-bottom: 1rem !important;
  }
  .mPb4 {
    padding-bottom: 1.5rem !important;
  }
  .mPb5 {
    padding-bottom: 3rem !important;
  }
  .mPl0 {
    padding-left: 0 !important;
  }
  .mPl1 {
    padding-left: 0.25rem !important;
  }
  .mPl2 {
    padding-left: 0.5rem !important;
  }
  .mPl3 {
    padding-left: 1rem !important;
  }
  .mPl4 {
    padding-left: 1.5rem !important;
  }
  .mPl5 {
    padding-left: 3rem !important;
  }
}
@media screen and (max-width: 649px) {
  .sP0 {
    padding: 0 !important;
  }
  .sP1 {
    padding: 0.25rem !important;
  }
  .sP2 {
    padding: 0.5rem !important;
  }
  .sP3 {
    padding: 1rem !important;
  }
  .sP4 {
    padding: 1.5rem !important;
  }
  .sP5 {
    padding: 3rem !important;
  }
  .sPx0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .sPx1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .sPx2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .sPx3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .sPx4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .sPx5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .sPy0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .sPy1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .sPy2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .sPy3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .sPy4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .sPy5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .sPt0 {
    padding-top: 0 !important;
  }
  .sPt1 {
    padding-top: 0.25rem !important;
  }
  .sPt2 {
    padding-top: 0.5rem !important;
  }
  .sPt3 {
    padding-top: 1rem !important;
  }
  .sPt4 {
    padding-top: 1.5rem !important;
  }
  .sPt5 {
    padding-top: 3rem !important;
  }
  .sPr0 {
    padding-right: 0 !important;
  }
  .sPr1 {
    padding-right: 0.25rem !important;
  }
  .sPr2 {
    padding-right: 0.5rem !important;
  }
  .sPr3 {
    padding-right: 1rem !important;
  }
  .sPr4 {
    padding-right: 1.5rem !important;
  }
  .sPr5 {
    padding-right: 3rem !important;
  }
  .sPb0 {
    padding-bottom: 0 !important;
  }
  .sPb1 {
    padding-bottom: 0.25rem !important;
  }
  .sPb2 {
    padding-bottom: 0.5rem !important;
  }
  .sPb3 {
    padding-bottom: 1rem !important;
  }
  .sPb4 {
    padding-bottom: 1.5rem !important;
  }
  .sPb5 {
    padding-bottom: 3rem !important;
  }
  .sPl0 {
    padding-left: 0 !important;
  }
  .sPl1 {
    padding-left: 0.25rem !important;
  }
  .sPl2 {
    padding-left: 0.5rem !important;
  }
  .sPl3 {
    padding-left: 1rem !important;
  }
  .sPl4 {
    padding-left: 1.5rem !important;
  }
  .sPl5 {
    padding-left: 3rem !important;
  }
}
.w5px {
  width: 5px !important;
}
.maxw5px {
  max-width: 5px !important;
}
.minw5px {
  min-width: 5px !important;
}
.w3rem {
  width: 3rem !important;
}
.maxw3rem {
  max-width: 3rem !important;
}
.minw3rem {
  min-width: 3rem !important;
}
.w5rem {
  width: 5rem !important;
}
.maxw5rem {
  max-width: 5rem !important;
}
.minw5rem {
  min-width: 5rem !important;
}
.w10rem {
  width: 10rem !important;
}
.maxw10rem {
  max-width: 10rem !important;
}
.minw10rem {
  min-width: 10rem !important;
}
.w0 {
  width: 0% !important;
}
.maxw0 {
  max-width: 0% !important;
}
.minw0 {
  min-width: 0% !important;
}
.w1 {
  width: 1% !important;
}
.maxw1 {
  max-width: 1% !important;
}
.minw1 {
  min-width: 1% !important;
}
.w2 {
  width: 2% !important;
}
.maxw2 {
  max-width: 2% !important;
}
.minw2 {
  min-width: 2% !important;
}
.w3 {
  width: 3% !important;
}
.maxw3 {
  max-width: 3% !important;
}
.minw3 {
  min-width: 3% !important;
}
.w4 {
  width: 4% !important;
}
.maxw4 {
  max-width: 4% !important;
}
.minw4 {
  min-width: 4% !important;
}
.w5 {
  width: 5% !important;
}
.maxw5 {
  max-width: 5% !important;
}
.minw5 {
  min-width: 5% !important;
}
.w10 {
  width: 10% !important;
}
.maxw10 {
  max-width: 10% !important;
}
.minw10 {
  min-width: 10% !important;
}
.w15 {
  width: 15% !important;
}
.maxw15 {
  max-width: 15% !important;
}
.minw15 {
  min-width: 15% !important;
}
.w20 {
  width: 20% !important;
}
.maxw20 {
  max-width: 20% !important;
}
.minw20 {
  min-width: 20% !important;
}
.w25 {
  width: 25% !important;
}
.maxw25 {
  max-width: 25% !important;
}
.minw25 {
  min-width: 25% !important;
}
.w30 {
  width: 30% !important;
}
.maxw30 {
  max-width: 30% !important;
}
.minw30 {
  min-width: 30% !important;
}
.w33 {
  width: 33% !important;
}
.maxw33 {
  max-width: 33% !important;
}
.minw33 {
  min-width: 33% !important;
}
.w35 {
  width: 35% !important;
}
.maxw35 {
  max-width: 35% !important;
}
.minw35 {
  min-width: 35% !important;
}
.w40 {
  width: 40% !important;
}
.maxw40 {
  max-width: 40% !important;
}
.minw40 {
  min-width: 40% !important;
}
.w45 {
  width: 45% !important;
}
.maxw45 {
  max-width: 45% !important;
}
.minw45 {
  min-width: 45% !important;
}
.w50 {
  width: 50% !important;
}
.maxw50 {
  max-width: 50% !important;
}
.minw50 {
  min-width: 50% !important;
}
.w55 {
  width: 55% !important;
}
.maxw55 {
  max-width: 55% !important;
}
.minw55 {
  min-width: 55% !important;
}
.w60 {
  width: 60% !important;
}
.maxw60 {
  max-width: 60% !important;
}
.minw60 {
  min-width: 60% !important;
}
.w65 {
  width: 65% !important;
}
.maxw65 {
  max-width: 65% !important;
}
.minw65 {
  min-width: 65% !important;
}
.w66 {
  width: 66% !important;
}
.maxw66 {
  max-width: 66% !important;
}
.minw66 {
  min-width: 66% !important;
}
.w67 {
  width: 67% !important;
}
.maxw67 {
  max-width: 67% !important;
}
.minw67 {
  min-width: 67% !important;
}
.w70 {
  width: 70% !important;
}
.maxw70 {
  max-width: 70% !important;
}
.minw70 {
  min-width: 70% !important;
}
.w75 {
  width: 75% !important;
}
.maxw75 {
  max-width: 75% !important;
}
.minw75 {
  min-width: 75% !important;
}
.w80 {
  width: 80% !important;
}
.maxw80 {
  max-width: 80% !important;
}
.minw80 {
  min-width: 80% !important;
}
.w85 {
  width: 85% !important;
}
.maxw85 {
  max-width: 85% !important;
}
.minw85 {
  min-width: 85% !important;
}
.w90 {
  width: 90% !important;
}
.maxw90 {
  max-width: 90% !important;
}
.minw90 {
  min-width: 90% !important;
}
.w95 {
  width: 95% !important;
}
.maxw95 {
  max-width: 95% !important;
}
.minw95 {
  min-width: 95% !important;
}
.w98 {
  width: 98% !important;
}
.maxw98 {
  max-width: 98% !important;
}
.minw98 {
  min-width: 98% !important;
}
.w99 {
  width: 99% !important;
}
.maxw99 {
  max-width: 99% !important;
}
.minw99 {
  min-width: 99% !important;
}
.w100 {
  width: 100% !important;
}
.maxw100 {
  max-width: 100% !important;
}
.minw100 {
  min-width: 100% !important;
}
.wAuto {
  width: auto !important;
}
.maxwAuto {
  max-width: auto !important;
}
.minwAuto {
  min-width: auto !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mW5px {
    width: 5px !important;
  }
  .mMaxw5px {
    max-width: 5px !important;
  }
  .mMinw5px {
    min-width: 5px !important;
  }
  .mW5 {
    width: 5% !important;
  }
  .mMaxw5 {
    max-width: 5% !important;
  }
  .mMinw5 {
    min-width: 5% !important;
  }
  .mW10 {
    width: 10% !important;
  }
  .mMaxw10 {
    max-width: 10% !important;
  }
  .mMinw10 {
    min-width: 10% !important;
  }
  .mW15 {
    width: 15% !important;
  }
  .mMaxw15 {
    max-width: 15% !important;
  }
  .mMinw15 {
    min-width: 15% !important;
  }
  .mW20 {
    width: 20% !important;
  }
  .mMaxw20 {
    max-width: 20% !important;
  }
  .mMinw20 {
    min-width: 20% !important;
  }
  .mW25 {
    width: 25% !important;
  }
  .mMaxw25 {
    max-width: 25% !important;
  }
  .mMinw25 {
    min-width: 25% !important;
  }
  .mW30 {
    width: 30% !important;
  }
  .mMaxw30 {
    max-width: 30% !important;
  }
  .mMinw30 {
    min-width: 30% !important;
  }
  .mW33 {
    width: 33% !important;
  }
  .mMaxw33 {
    max-width: 33% !important;
  }
  .mMinw33 {
    min-width: 33% !important;
  }
  .mW35 {
    width: 35% !important;
  }
  .mMaxw35 {
    max-width: 35% !important;
  }
  .mMinw35 {
    min-width: 35% !important;
  }
  .mW40 {
    width: 40% !important;
  }
  .mMaxw40 {
    max-width: 40% !important;
  }
  .mMinw40 {
    min-width: 40% !important;
  }
  .mW45 {
    width: 45% !important;
  }
  .mMaxw45 {
    max-width: 45% !important;
  }
  .mMinw45 {
    min-width: 45% !important;
  }
  .mW50 {
    width: 50% !important;
  }
  .mMaxw50 {
    max-width: 50% !important;
  }
  .mMinw50 {
    min-width: 50% !important;
  }
  .mW55 {
    width: 55% !important;
  }
  .mMaxw55 {
    max-width: 55% !important;
  }
  .mMinw55 {
    min-width: 55% !important;
  }
  .mW60 {
    width: 60% !important;
  }
  .mMaxw60 {
    max-width: 60% !important;
  }
  .mMinw60 {
    min-width: 60% !important;
  }
  .mW65 {
    width: 65% !important;
  }
  .mMaxw65 {
    max-width: 65% !important;
  }
  .mMinw65 {
    min-width: 65% !important;
  }
  .mW66 {
    width: 66% !important;
  }
  .mMaxw66 {
    max-width: 66% !important;
  }
  .mMinw66 {
    min-width: 66% !important;
  }
  .mW70 {
    width: 70% !important;
  }
  .mMaxw70 {
    max-width: 70% !important;
  }
  .mMinw70 {
    min-width: 70% !important;
  }
  .mW75 {
    width: 75% !important;
  }
  .mMaxw75 {
    max-width: 75% !important;
  }
  .mMinw75 {
    min-width: 75% !important;
  }
  .mW80 {
    width: 80% !important;
  }
  .mMaxw80 {
    max-width: 80% !important;
  }
  .mMinw80 {
    min-width: 80% !important;
  }
  .mW85 {
    width: 85% !important;
  }
  .mMaxw85 {
    max-width: 85% !important;
  }
  .mMinw85 {
    min-width: 85% !important;
  }
  .mW90 {
    width: 90% !important;
  }
  .mMaxw90 {
    max-width: 90% !important;
  }
  .mMinw90 {
    min-width: 90% !important;
  }
  .mW95 {
    width: 95% !important;
  }
  .mMaxw95 {
    max-width: 95% !important;
  }
  .mMinw95 {
    min-width: 95% !important;
  }
  .mW100 {
    width: 100% !important;
  }
  .mMaxw100 {
    max-width: 100% !important;
  }
  .mMinw100 {
    min-width: 100% !important;
  }
  .mWAuto {
    width: auto !important;
  }
  .mMaxwAuto {
    max-width: auto !important;
  }
  .mMinwAuto {
    min-width: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .sW5px {
    width: 5px !important;
  }
  .sMaxw5px {
    max-width: 5px !important;
  }
  .sMinw5px {
    min-width: 5px !important;
  }
  .sW5 {
    width: 5% !important;
  }
  .sMaxw5 {
    max-width: 5% !important;
  }
  .sMinw5 {
    min-width: 5% !important;
  }
  .sW10 {
    width: 10% !important;
  }
  .sMaxw10 {
    max-width: 10% !important;
  }
  .sMinw10 {
    min-width: 10% !important;
  }
  .sW15 {
    width: 15% !important;
  }
  .sMaxw15 {
    max-width: 15% !important;
  }
  .sMinw15 {
    min-width: 15% !important;
  }
  .sW20 {
    width: 20% !important;
  }
  .sMaxw20 {
    max-width: 20% !important;
  }
  .sMinw20 {
    min-width: 20% !important;
  }
  .sW25 {
    width: 25% !important;
  }
  .sMaxw25 {
    max-width: 25% !important;
  }
  .sMinw25 {
    min-width: 25% !important;
  }
  .sW30 {
    width: 30% !important;
  }
  .sMaxw30 {
    max-width: 30% !important;
  }
  .sMinw30 {
    min-width: 30% !important;
  }
  .sW33 {
    width: 33% !important;
  }
  .sMaxw33 {
    max-width: 33% !important;
  }
  .sMinw33 {
    min-width: 33% !important;
  }
  .sW35 {
    width: 35% !important;
  }
  .sMaxw35 {
    max-width: 35% !important;
  }
  .sMinw35 {
    min-width: 35% !important;
  }
  .sW40 {
    width: 40% !important;
  }
  .sMaxw40 {
    max-width: 40% !important;
  }
  .sMinw40 {
    min-width: 40% !important;
  }
  .sW45 {
    width: 45% !important;
  }
  .sMaxw45 {
    max-width: 45% !important;
  }
  .sMinw45 {
    min-width: 45% !important;
  }
  .sW50 {
    width: 50% !important;
  }
  .sMaxw50 {
    max-width: 50% !important;
  }
  .sMinw50 {
    min-width: 50% !important;
  }
  .sW55 {
    width: 55% !important;
  }
  .sMaxw55 {
    max-width: 55% !important;
  }
  .sMinw55 {
    min-width: 55% !important;
  }
  .sW60 {
    width: 60% !important;
  }
  .sMaxw60 {
    max-width: 60% !important;
  }
  .sMinw60 {
    min-width: 60% !important;
  }
  .sW65 {
    width: 65% !important;
  }
  .sMaxw65 {
    max-width: 65% !important;
  }
  .sMinw65 {
    min-width: 65% !important;
  }
  .sW66 {
    width: 66% !important;
  }
  .sMaxw66 {
    max-width: 66% !important;
  }
  .sMinw66 {
    min-width: 66% !important;
  }
  .sW70 {
    width: 70% !important;
  }
  .sMaxw70 {
    max-width: 70% !important;
  }
  .sMinw70 {
    min-width: 70% !important;
  }
  .sW75 {
    width: 75% !important;
  }
  .sMaxw75 {
    max-width: 75% !important;
  }
  .sMinw75 {
    min-width: 75% !important;
  }
  .sW80 {
    width: 80% !important;
  }
  .sMaxw80 {
    max-width: 80% !important;
  }
  .sMinw80 {
    min-width: 80% !important;
  }
  .sW85 {
    width: 85% !important;
  }
  .sMaxw85 {
    max-width: 85% !important;
  }
  .sMinw85 {
    min-width: 85% !important;
  }
  .sW90 {
    width: 90% !important;
  }
  .sMaxw90 {
    max-width: 90% !important;
  }
  .sMinw90 {
    min-width: 90% !important;
  }
  .sW95 {
    width: 95% !important;
  }
  .sMaxw95 {
    max-width: 95% !important;
  }
  .sMinw95 {
    min-width: 95% !important;
  }
  .sW100 {
    width: 100% !important;
  }
  .sMaxw100 {
    max-width: 100% !important;
  }
  .sMinw100 {
    min-width: 100% !important;
  }
  .sWAuto {
    width: auto !important;
  }
  .sMaxwAuto {
    max-width: auto !important;
  }
  .sMinwAuto {
    min-width: auto !important;
  }
}
.vw0 {
  width: 0vw !important;
}
.vw1 {
  width: 1vw !important;
}
.vw2 {
  width: 2vw !important;
}
.vw3 {
  width: 3vw !important;
}
.vw4 {
  width: 4vw !important;
}
.vw5 {
  width: 5vw !important;
}
.vw10 {
  width: 10vw !important;
}
.vw15 {
  width: 15vw !important;
}
.vw20 {
  width: 20vw !important;
}
.vw25 {
  width: 25vw !important;
}
.vw30 {
  width: 30vw !important;
}
.vw33 {
  width: 33vw !important;
}
.vw35 {
  width: 35vw !important;
}
.vw40 {
  width: 40vw !important;
}
.vw45 {
  width: 45vw !important;
}
.vw50 {
  width: 50vw !important;
}
.vw55 {
  width: 55vw !important;
}
.vw60 {
  width: 60vw !important;
}
.vw65 {
  width: 65vw !important;
}
.vw66 {
  width: 66vw !important;
}
.vw67 {
  width: 67vw !important;
}
.vw70 {
  width: 70vw !important;
}
.vw75 {
  width: 75vw !important;
}
.vw80 {
  width: 80vw !important;
}
.vw85 {
  width: 85vw !important;
}
.vw90 {
  width: 90vw !important;
}
.vw95 {
  width: 95vw !important;
}
.vw100 {
  width: 100vw !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mVw0 {
    width: 0vw !important;
  }
  .mVw1 {
    width: 1vw !important;
  }
  .mVw2 {
    width: 2vw !important;
  }
  .mVw3 {
    width: 3vw !important;
  }
  .mVw4 {
    width: 4vw !important;
  }
  .mVw5 {
    width: 5vw !important;
  }
  .mVw10 {
    width: 10vw !important;
  }
  .mVw15 {
    width: 15vw !important;
  }
  .mVw20 {
    width: 20vw !important;
  }
  .mVw25 {
    width: 25vw !important;
  }
  .mVw30 {
    width: 30vw !important;
  }
  .mVw33 {
    width: 33vw !important;
  }
  .mVw35 {
    width: 35vw !important;
  }
  .mVw40 {
    width: 40vw !important;
  }
  .mVw45 {
    width: 45vw !important;
  }
  .mVw50 {
    width: 50vw !important;
  }
  .mVw55 {
    width: 55vw !important;
  }
  .mVw60 {
    width: 60vw !important;
  }
  .mVw65 {
    width: 65vw !important;
  }
  .mVw66 {
    width: 66vw !important;
  }
  .mVw67 {
    width: 67vw !important;
  }
  .mVw70 {
    width: 70vw !important;
  }
  .mVw75 {
    width: 75vw !important;
  }
  .mVw80 {
    width: 80vw !important;
  }
  .mVw85 {
    width: 85vw !important;
  }
  .mVw90 {
    width: 90vw !important;
  }
  .mVw95 {
    width: 95vw !important;
  }
  .mVw100 {
    width: 100vw !important;
  }
}
@media screen and (max-width: 649px) {
  .sVw0 {
    width: 0vw !important;
  }
  .sVw1 {
    width: 1vw !important;
  }
  .sVw2 {
    width: 2vw !important;
  }
  .sVw3 {
    width: 3vw !important;
  }
  .sVw4 {
    width: 4vw !important;
  }
  .sVw5 {
    width: 5vw !important;
  }
  .sVw10 {
    width: 10vw !important;
  }
  .sVw15 {
    width: 15vw !important;
  }
  .sVw20 {
    width: 20vw !important;
  }
  .sVw25 {
    width: 25vw !important;
  }
  .sVw30 {
    width: 30vw !important;
  }
  .sVw33 {
    width: 33vw !important;
  }
  .sVw35 {
    width: 35vw !important;
  }
  .sVw40 {
    width: 40vw !important;
  }
  .sVw45 {
    width: 45vw !important;
  }
  .sVw50 {
    width: 50vw !important;
  }
  .sVw55 {
    width: 55vw !important;
  }
  .sVw60 {
    width: 60vw !important;
  }
  .sVw65 {
    width: 65vw !important;
  }
  .sVw66 {
    width: 66vw !important;
  }
  .sVw67 {
    width: 67vw !important;
  }
  .sVw70 {
    width: 70vw !important;
  }
  .sVw75 {
    width: 75vw !important;
  }
  .sVw80 {
    width: 80vw !important;
  }
  .sVw85 {
    width: 85vw !important;
  }
  .sVw90 {
    width: 90vw !important;
  }
  .sVw95 {
    width: 95vw !important;
  }
  .sVw100 {
    width: 100vw !important;
  }
}
.h5 {
  height: 5% !important;
}
.h10 {
  height: 10% !important;
}
.h15 {
  height: 15% !important;
}
.h20 {
  height: 20% !important;
}
.h25 {
  height: 25% !important;
}
.h30 {
  height: 30% !important;
}
.h35 {
  height: 35% !important;
}
.h40 {
  height: 40% !important;
}
.h45 {
  height: 45% !important;
}
.h50 {
  height: 50% !important;
}
.h55 {
  height: 55% !important;
}
.h60 {
  height: 60% !important;
}
.h65 {
  height: 65% !important;
}
.h70 {
  height: 70% !important;
}
.h75 {
  height: 75% !important;
}
.h80 {
  height: 80% !important;
}
.h85 {
  height: 85% !important;
}
.h90 {
  height: 90% !important;
}
.h95 {
  height: 95% !important;
}
.h100 {
  height: 100% !important;
}
.hAuto {
  height: auto !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mH5 {
    height: 5% !important;
  }
  .mH10 {
    height: 10% !important;
  }
  .mH15 {
    height: 15% !important;
  }
  .mH20 {
    height: 20% !important;
  }
  .mH25 {
    height: 25% !important;
  }
  .mH30 {
    height: 30% !important;
  }
  .mH35 {
    height: 35% !important;
  }
  .mH40 {
    height: 40% !important;
  }
  .mH45 {
    height: 45% !important;
  }
  .mH50 {
    height: 50% !important;
  }
  .mH55 {
    height: 55% !important;
  }
  .mH60 {
    height: 60% !important;
  }
  .mH65 {
    height: 65% !important;
  }
  .mH70 {
    height: 70% !important;
  }
  .mH75 {
    height: 75% !important;
  }
  .mH80 {
    height: 80% !important;
  }
  .mH85 {
    height: 85% !important;
  }
  .mH90 {
    height: 90% !important;
  }
  .mH95 {
    height: 95% !important;
  }
  .mH100 {
    height: 100% !important;
  }
  .mHAuto {
    height: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .sH5 {
    height: 5% !important;
  }
  .sH10 {
    height: 10% !important;
  }
  .sH15 {
    height: 15% !important;
  }
  .sH20 {
    height: 20% !important;
  }
  .sH25 {
    height: 25% !important;
  }
  .sH30 {
    height: 30% !important;
  }
  .sH35 {
    height: 35% !important;
  }
  .sH40 {
    height: 40% !important;
  }
  .sH45 {
    height: 45% !important;
  }
  .sH50 {
    height: 50% !important;
  }
  .sH55 {
    height: 55% !important;
  }
  .sH60 {
    height: 60% !important;
  }
  .sH65 {
    height: 65% !important;
  }
  .sH70 {
    height: 70% !important;
  }
  .sH75 {
    height: 75% !important;
  }
  .sH80 {
    height: 80% !important;
  }
  .sH85 {
    height: 85% !important;
  }
  .sH90 {
    height: 90% !important;
  }
  .sH95 {
    height: 95% !important;
  }
  .sH100 {
    height: 100% !important;
  }
  .sHAuto {
    height: auto !important;
  }
}
.maxh5 {
  max-height: 5% !important;
}
.maxh10 {
  max-height: 10% !important;
}
.maxh15 {
  max-height: 15% !important;
}
.maxh20 {
  max-height: 20% !important;
}
.maxh25 {
  max-height: 25% !important;
}
.maxh30 {
  max-height: 30% !important;
}
.maxh35 {
  max-height: 35% !important;
}
.maxh40 {
  max-height: 40% !important;
}
.maxh45 {
  max-height: 45% !important;
}
.maxh50 {
  max-height: 50% !important;
}
.maxh55 {
  max-height: 55% !important;
}
.maxh60 {
  max-height: 60% !important;
}
.maxh65 {
  max-height: 65% !important;
}
.maxh70 {
  max-height: 70% !important;
}
.maxh75 {
  max-height: 75% !important;
}
.maxh80 {
  max-height: 80% !important;
}
.maxh85 {
  max-height: 85% !important;
}
.maxh90 {
  max-height: 90% !important;
}
.maxh95 {
  max-height: 95% !important;
}
.maxh100 {
  max-height: 100% !important;
}
.maxhAuto {
  max-height: auto !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mMaxh5 {
    max-height: 5% !important;
  }
  .mMaxh10 {
    max-height: 10% !important;
  }
  .mMaxh15 {
    max-height: 15% !important;
  }
  .mMaxh20 {
    max-height: 20% !important;
  }
  .mMaxh25 {
    max-height: 25% !important;
  }
  .mMaxh30 {
    max-height: 30% !important;
  }
  .mMaxh35 {
    max-height: 35% !important;
  }
  .mMaxh40 {
    max-height: 40% !important;
  }
  .mMaxh45 {
    max-height: 45% !important;
  }
  .mMaxh50 {
    max-height: 50% !important;
  }
  .mMaxh55 {
    max-height: 55% !important;
  }
  .mMaxh60 {
    max-height: 60% !important;
  }
  .mMaxh65 {
    max-height: 65% !important;
  }
  .mMaxh70 {
    max-height: 70% !important;
  }
  .mMaxh75 {
    max-height: 75% !important;
  }
  .mMaxh80 {
    max-height: 80% !important;
  }
  .mMaxh85 {
    max-height: 85% !important;
  }
  .mMaxh90 {
    max-height: 90% !important;
  }
  .mMaxh95 {
    max-height: 95% !important;
  }
  .mMaxh100 {
    max-height: 100% !important;
  }
  .mMaxhAuto {
    max-height: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .sMaxh5 {
    max-height: 5% !important;
  }
  .sMaxh10 {
    max-height: 10% !important;
  }
  .sMaxh15 {
    max-height: 15% !important;
  }
  .sMaxh20 {
    max-height: 20% !important;
  }
  .sMaxh25 {
    max-height: 25% !important;
  }
  .sMaxh30 {
    max-height: 30% !important;
  }
  .sMaxh35 {
    max-height: 35% !important;
  }
  .sMaxh40 {
    max-height: 40% !important;
  }
  .sMaxh45 {
    max-height: 45% !important;
  }
  .sMaxh50 {
    max-height: 50% !important;
  }
  .sMaxh55 {
    max-height: 55% !important;
  }
  .sMaxh60 {
    max-height: 60% !important;
  }
  .sMaxh65 {
    max-height: 65% !important;
  }
  .sMaxh70 {
    max-height: 70% !important;
  }
  .sMaxh75 {
    max-height: 75% !important;
  }
  .sMaxh80 {
    max-height: 80% !important;
  }
  .sMaxh85 {
    max-height: 85% !important;
  }
  .sMaxh90 {
    max-height: 90% !important;
  }
  .sMaxh95 {
    max-height: 95% !important;
  }
  .sMaxh100 {
    max-height: 100% !important;
  }
  .sMaxhAuto {
    max-height: auto !important;
  }
}
.minh5 {
  min-height: 5% !important;
}
.minh10 {
  min-height: 10% !important;
}
.minh15 {
  min-height: 15% !important;
}
.minh20 {
  min-height: 20% !important;
}
.minh25 {
  min-height: 25% !important;
}
.minh30 {
  min-height: 30% !important;
}
.minh35 {
  min-height: 35% !important;
}
.minh40 {
  min-height: 40% !important;
}
.minh45 {
  min-height: 45% !important;
}
.minh50 {
  min-height: 50% !important;
}
.minh55 {
  min-height: 55% !important;
}
.minh60 {
  min-height: 60% !important;
}
.minh65 {
  min-height: 65% !important;
}
.minh70 {
  min-height: 70% !important;
}
.minh75 {
  min-height: 75% !important;
}
.minh80 {
  min-height: 80% !important;
}
.minh85 {
  min-height: 85% !important;
}
.minh90 {
  min-height: 90% !important;
}
.minh95 {
  min-height: 95% !important;
}
.minh100 {
  min-height: 100% !important;
}
.minhAuto {
  min-height: auto !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mMinh5 {
    min-height: 5% !important;
  }
  .mMinh10 {
    min-height: 10% !important;
  }
  .mMinh15 {
    min-height: 15% !important;
  }
  .mMinh20 {
    min-height: 20% !important;
  }
  .mMinh25 {
    min-height: 25% !important;
  }
  .mMinh30 {
    min-height: 30% !important;
  }
  .mMinh35 {
    min-height: 35% !important;
  }
  .mMinh40 {
    min-height: 40% !important;
  }
  .mMinh45 {
    min-height: 45% !important;
  }
  .mMinh50 {
    min-height: 50% !important;
  }
  .mMinh55 {
    min-height: 55% !important;
  }
  .mMinh60 {
    min-height: 60% !important;
  }
  .mMinh65 {
    min-height: 65% !important;
  }
  .mMinh70 {
    min-height: 70% !important;
  }
  .mMinh75 {
    min-height: 75% !important;
  }
  .mMinh80 {
    min-height: 80% !important;
  }
  .mMinh85 {
    min-height: 85% !important;
  }
  .mMinh90 {
    min-height: 90% !important;
  }
  .mMinh95 {
    min-height: 95% !important;
  }
  .mMinh100 {
    min-height: 100% !important;
  }
  .mMinhAuto {
    min-height: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .sMinh5 {
    min-height: 5% !important;
  }
  .sMinh10 {
    min-height: 10% !important;
  }
  .sMinh15 {
    min-height: 15% !important;
  }
  .sMinh20 {
    min-height: 20% !important;
  }
  .sMinh25 {
    min-height: 25% !important;
  }
  .sMinh30 {
    min-height: 30% !important;
  }
  .sMinh35 {
    min-height: 35% !important;
  }
  .sMinh40 {
    min-height: 40% !important;
  }
  .sMinh45 {
    min-height: 45% !important;
  }
  .sMinh50 {
    min-height: 50% !important;
  }
  .sMinh55 {
    min-height: 55% !important;
  }
  .sMinh60 {
    min-height: 60% !important;
  }
  .sMinh65 {
    min-height: 65% !important;
  }
  .sMinh70 {
    min-height: 70% !important;
  }
  .sMinh75 {
    min-height: 75% !important;
  }
  .sMinh80 {
    min-height: 80% !important;
  }
  .sMinh85 {
    min-height: 85% !important;
  }
  .sMinh90 {
    min-height: 90% !important;
  }
  .sMinh95 {
    min-height: 95% !important;
  }
  .sMinh100 {
    min-height: 100% !important;
  }
  .sMinhAuto {
    min-height: auto !important;
  }
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 500;
  line-height: 1.2;
}
h1,
.h1 {
  font-size: 2.5rem;
}
h2,
.h2 {
  font-size: 2rem;
}
h3,
.h3 {
  font-size: 1.75rem;
}
h4,
.h4 {
  font-size: 1.5rem;
}
h5,
.h5 {
  font-size: 1.25rem;
}
h6,
.h6 {
  font-size: 1rem;
}
.f1 {
  font-size: 2.5rem !important;
}
.fs2 {
  font-size: 2rem !important;
}
.fs3 {
  font-size: 1.75rem !important;
}
.fs4 {
  font-size: 1.5rem !important;
}
.fs5 {
  font-size: 1.25rem !important;
}
.fs6 {
  font-size: 1rem !important;
}
.fs7 {
  font-size: 0.85rem !important;
}
.fsxx {
  font-size: 32px !important;
}
.fsx {
  font-size: 26px !important;
}
.fsb {
  font-size: 20px !important;
}
.fsm {
  font-size: 16px !important;
}
.fss {
  font-size: 12px !important;
}
.fsxs {
  font-size: 10.49px !important;
}
.fsxxs {
  font-size: 9px !important;
}
.fsxx1 {
  font-size: 32px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 300;
}
.fsxx2 {
  font-size: 32px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsxx3 {
  font-size: 32px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
}
.fsx1 {
  font-size: 26px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsx2 {
  font-size: 26px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.fsx3 {
  font-size: 26px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fsb1 {
  font-size: 20px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsb2 {
  font-size: 20px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.fsb3 {
  font-size: 20px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fsm1 {
  font-size: 14px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsm2 {
  font-size: 14px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.fsm3 {
  font-size: 14px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fss1 {
  font-size: 12px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fss2 {
  font-size: 12px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.fss3 {
  font-size: 12px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fsxs1 {
  font-size: 10.49px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsxs2 {
  font-size: 10.49px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.fsxs3 {
  font-size: 10.49px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fsxxs1 {
  font-size: 8px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.fsxxs2 {
  font-size: 8px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.fsxxs3 {
  font-size: 8px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
}
.fsxxMono {
  font-size: 32px !important;
  font-family: "Cutive Mono";
}
.fsxMono {
  font-size: 26px !important;
  font-family: "Cutive Mono";
}
.fsbMono {
  font-size: 20px !important;
  font-family: "Cutive Mono";
}
.fsmMono {
  font-size: 14px !important;
  font-family: "Cutive Mono";
}
.fssMono {
  font-size: 12px !important;
  font-family: "Cutive Mono";
}
.fsxsMono {
  font-size: 10.49px !important;
  font-family: "Cutive Mono";
}
.fsxxsMono {
  font-size: 8px !important;
  font-family: "Cutive Mono";
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mFs1 {
    font-size: 2.5rem !important;
  }
  .mFs2 {
    font-size: 2rem !important;
  }
  .mFs3 {
    font-size: 1.75rem !important;
  }
  .mFs4 {
    font-size: 1.5rem !important;
  }
  .mFs5 {
    font-size: 1.25rem !important;
  }
  .mFs6 {
    font-size: 1rem !important;
  }
  .mfs7 {
    font-size: 0.85rem !important;
  }
  .mFsxx {
    font-size: 32px !important;
  }
  .mFsx {
    font-size: 26px !important;
  }
  .mFsb {
    font-size: 20px !important;
  }
  .mFsm {
    font-size: 16px !important;
  }
  .mFss {
    font-size: 12px !important;
  }
  .mFsxs {
    font-size: 10.49px !important;
  }
  .mFsxxs {
    font-size: 9px !important;
  }
  .mFsxx1 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
  }
  .mFsxx2 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsxx3 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  .mFsx1 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsx2 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFsx3 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .mFsb1 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsb2 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFsb3 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .mFsm1 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsm2 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFsm3 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .mFss1 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFss2 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFss3 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .mFsxs {
    font-size: 10.49px !important;
  }
  .mFsxs1 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsxs2 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFsxs3 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .mFsxxs1 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .mFsxxs2 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .mFsxxs3 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
}
@media screen and (max-width: 649px) {
  .sFs1 {
    font-size: 2.5rem !important;
  }
  .sFs2 {
    font-size: 2rem !important;
  }
  .sFs3 {
    font-size: 1.75rem !important;
  }
  .sFs4 {
    font-size: 1.5rem !important;
  }
  .sFs5 {
    font-size: 1.25rem !important;
  }
  .sFs6 {
    font-size: 1rem !important;
  }
  .sfs7 {
    font-size: 0.85rem !important;
  }
  .sFsxx {
    font-size: 32px !important;
  }
  .sFsx {
    font-size: 26px !important;
  }
  .sFsb {
    font-size: 20px !important;
  }
  .sFsm {
    font-size: 16px !important;
  }
  .sFss {
    font-size: 12px !important;
  }
  .sFsxs {
    font-size: 10.49px !important;
  }
  .sFsxxs {
    font-size: 9px !important;
  }
  .sFsxx1 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
  }
  .sFsxx2 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsxx3 {
    font-size: 32px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  .sFsx1 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsx2 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFsx3 {
    font-size: 26px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .sFsb1 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsb2 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFsb3 {
    font-size: 20px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .sFsm1 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsm2 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFsm3 {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .sFss1 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFss2 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFss3 {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .sFsxs {
    font-size: 10.49px !important;
  }
  .sFsxs1 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsxs2 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFsxs3 {
    font-size: 10.49px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  .sFsxxs1 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  .sFsxxs2 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .sFsxxs3 {
    font-size: 8px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
  }
}
.fcPrimary {
  color: var(--bgc-pri) !important;
}
.fcSecondary {
  color: #6c757d !important;
}
.fcSuccess {
  color: #198754 !important;
}
.fcInfo {
  color: #0dcaf0 !important;
}
.fcWarning {
  color: #ffc107 !important;
}
.fcDanger {
  color: #dc3545 !important;
}
.fcLight {
  color: #f8f9fa !important;
}
.fcDark {
  color: #212529 !important;
}
.fcWhite {
  color: #fff !important;
}
.fcBody {
  color: #212529 !important;
}
.fcMuted {
  color: #6c757d !important;
}
.fcBlack-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
.fcWhite-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.fcReset {
  color: inherit !important;
}
.textBaseline {
  vertical-align: baseline !important;
}
.textTop {
  vertical-align: top !important;
}
.textMiddle {
  vertical-align: middle !important;
  align-self: center;
}
.textBottom {
  vertical-align: bottom !important;
}
.textSub {
  vertical-align: sub !important;
}
.textSuper {
  vertical-align: super !important;
}
.textRight {
  text-align: right !important;
}
.textLeft {
  text-align: left !important;
}
.textCenter {
  text-align: center !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mTextBaseline {
    vertical-align: baseline !important;
  }
  .mTextTop {
    vertical-align: top !important;
  }
  .mTextMiddle {
    vertical-align: middle !important;
    align-self: center;
  }
  .mTextBottom {
    vertical-align: bottom !important;
  }
  .mTextSub {
    vertical-align: sub !important;
  }
  .mTextSuper {
    vertical-align: super !important;
  }
  .mTextRight {
    text-align: right !important;
  }
  .mTextLeft {
    text-align: left !important;
  }
  .mTextCenter {
    text-align: center !important;
  }
}
@media screen and (max-width: 649px) {
  .sTextBaseline {
    vertical-align: baseline !important;
  }
  .sTextTop {
    vertical-align: top !important;
  }
  .sTextMiddle {
    vertical-align: middle !important;
    align-self: center;
  }
  .sTextBottom {
    vertical-align: bottom !important;
  }
  .sTextSub {
    vertical-align: sub !important;
  }
  .sTextSuper {
    vertical-align: super !important;
  }
  .sTextRight {
    text-align: right !important;
  }
  .sTextLeft {
    text-align: left !important;
  }
  .sTextCenter {
    text-align: center !important;
  }
}
.msgPrimary {
  color: #06357a;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.msgSecondary {
  color: #34383c;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
}
.msgSuccess {
  color: #0c4128;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.msgInfo {
  color: #04414d;
  background-color: #cff4fc;
  border-color: #b6effb;
}
.msgWarning {
  color: #523e02;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.msgDanger {
  color: #6a1a21;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.msgDark {
  color: #101214;
  background-color: #d3d3d4;
  border-color: #bcbebf;
}
.blue {
  color: #005eff;
}
.blueBg {
  border-radius: 50%;
  color: #f00 !important;
  background-color: #66ccff;
}
.primary {
  color: var(--bgc-pri) !important;
}
.red {
  color: #ff0000 !important;
}
.redNum {
  color: #ff0000 !important;
}
.green {
  color: green !important;
}
.amber {
  color: #ff7f00 !important;
}
.purple {
  color: #660066 !important;
}
.gray {
  color: #888888 !important;
}
.black {
  color: #000000 !important;
}
.white {
  color: white !important;
}
.yellow {
  color: yellow !important;
}
.badge {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.badge:empty {
  display: none;
}
.badgeGreen {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: green;
  background-color: #e5f7eb;
  border: 1px solid green !important;
}
.badgeRed {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: red;
  background-color: #ffebeb;
  border: 1px solid red !important;
}
.badgeAmber {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #ff7f00;
  background-color: #fff5eb;
  border: 1px solid #ff7f00 !important;
}
.badgeGray {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #787878;
  background-color: #f8f8f8;
  border: 1px solid #787878 !important;
}
.badgePrimary {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--fc-ter);
  background-color: var(--bgc-pri);
}
.badgeSecondary {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #fff;
  background-color: #6c757d;
}
.badgeDanger {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #fff;
  background-color: #dc3545;
}
.badgeWarning {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #212529;
  background-color: #ffc107;
}
.badgeInfo {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #17a2b8;
  background-color: #e1f9fc;
  border: 1px solid #17a2b8 !important;
}
.badgeLight {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #212529;
  background-color: #f8f9fa;
}
.badgeDark {
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #fff;
  background-color: #343a40;
}
.panalPrimary {
  color: var(--fc-ter);
  background-color: var(--bgc-pri);
  /* background-color: @gray-ul; */
}
.link {
  color: blue !important;
  border: 2px solid transparent;
}
.link:hover,
.link:focus {
  text-decoration: underline;
}
.linkNoColor {
  cursor: pointer;
  border: 2px solid transparent;
}
.linkNoColor:hover,
.linkNoColor:focus {
  text-decoration: underline;
}
.signOut {
  border-radius: 25px !important;
  padding: 6px 12px !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3), inset 2px 2px 10px rgba(255, 255, 255, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.5);
}
.btnGrp {
  display: inline-block;
  position: relative;
  font-weight: 400;
  line-height: 1.2rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 2px solid transparent;
  padding: 6px;
  border-radius: 3px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  align-self: center;
  color: var(--bgc-pri);
  background-color: #fff;
  border-color: var(--bgc-pri);
}
.btnSmall {
  padding: calc(1rem*0.15) calc(1rem*0.3);
  /* Some top and bottom padding */
  font-size: calc(1rem*0.8);
  /* Increased font-size */
}
.btnGrp:hover .btnGrpBody {
  display: flex;
  flex-flow: column nowrap;
}
.btnGrpBody {
  display: none;
  position: fixed;
  margin-top: 0.25rem !important;
  background-color: white;
  padding: 0.5rem !important;
  border: 1px solid gray;
  z-index: 10;
}
.btn {
  display: inline-block;
  position: relative;
  font-weight: 400;
  line-height: 1.2rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 2px solid transparent;
  padding: 6px;
  border-radius: 3px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  align-self: center;
}
.btn i {
  padding-right: 0.25rem !important;
}
.icon {
  cursor: pointer;
  border: 2px solid transparent;
}
.btnTop {
  width: fit-content;
  position: relative;
  height: fit-content;
}
.infoBtnMsg {
  cursor: pointer;
  position: absolute;
  font-size: 8px;
  top: -7px;
  right: -5px;
}
.infoMsgBo {
  visibility: hidden;
  width: auto;
  max-width: 200px;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  text-transform: capitalize;
  border-radius: 6px;
  position: absolute;
  word-wrap: break-word;
  z-index: 1;
  top: 32px;
  opacity: 0;
  transition: opacity 0.3s;
}
.infoBtnMsg:hover + .infoMsgBo {
  visibility: visible;
  opacity: 1;
}
.btnThin {
  display: inline-block;
  position: relative;
  font-weight: 400;
  line-height: 1.2rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 2px solid transparent;
  padding: 6px;
  border-radius: 3px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  align-self: center;
  padding: 3px;
  font-size: 12px;
  line-height: 1rem;
}
.btn:active {
  /*transform: translateY(1px);*/
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.bgPri,
.bgPrimary {
  background-color: var(--bgc-pri) !important;
}
.bgSec {
  background-color: var(--bgc-sec) !important;
}
.bgTer {
  background-color: var(--bgc-ter) !important;
}
.bgGreen {
  background-color: #198754 !important;
}
.bgGreen {
  background-color: #198754 !important;
}
.bgSuccess {
  background-color: #198754 !important;
}
.bgInfo {
  background-color: #0dcaf0 !important;
}
.bgWarning {
  background-color: #ffc107 !important;
}
.bgDanger {
  background-color: #dc3545 !important;
}
.bgLight {
  background-color: #f8f9fa !important;
}
.bgDark {
  background-color: #212529 !important;
}
.bgBody {
  background-color: #fff !important;
}
.bgWhite {
  background-color: #fff !important;
}
.bgTransparent {
  background-color: transparent !important;
}
.bgBradient {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}
.bgDefault {
  background-color: #e7e7e7;
}
.bgGrayT {
  background-color: #dddddd;
}
.bgGrayM {
  background-color: #eaeaea;
}
.bgGrayL {
  background-color: #F5F5F5;
}
.bgGrayUL {
  background-color: #f8f8f8;
}
.bgGrayULIMP {
  background-color: #f8f8f8 !important;
}
.btn-primary {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--br-pri);
}
.btn-primary:hover {
  color: var(--fc-pri);
  background-color: var(--br-pri);
  border-color: var(--br-sec);
}
.btn-secondary,
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
.btn-secondary:hover,
.btn-secondary:hover,
.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}
.btn-info {
  color: #fff;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
.btn-info:hover {
  color: #fff;
  background-color: #31d2f2;
  border-color: #25cff2;
}
.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn-warning:hover {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}
.btn-danger-light {
  color: #dc3545;
  background-color: #fff;
  border-color: #dc3545;
}
.btn-danger-light:hover {
  color: #bb2d3b;
  background-color: #fff;
  border-color: #b02a37;
}
.btn-light {
  color: var(--bgc-pri);
  background-color: #fff;
  border-color: var(--bgc-pri);
}
.btn-light:hover {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--bgc-pri);
}
.btn-light-nho {
  color: var(--bgc-pri);
  background-color: #fff;
  border-color: var(--bgc-pri);
}
.btn-light-red {
  color: #dc3545;
  background-color: #f8f9fa;
  border-color: #dc3545;
}
.btn-light-red:hover {
  color: var(--fc-pri);
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-light-green {
  color: #35dc5c;
  background-color: #f8f9fa;
  border-color: #35dc5c;
}
.btn-light-green:hover {
  color: var(--fc-pri);
  background-color: #4CAF50;
  border-color: #f8f9fa;
}
.btn-gray {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-gray:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}
.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
.btn-dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}
.btn-blue {
  color: #fff;
  background-color: #005eff;
  border-color: #004bcc;
}
.btn-blue:hover {
  color: #fff;
  background-color: #004bcc;
  border-color: #004bcc;
}
.btn-link {
  color: #004bcc;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn-icon {
  color: var(--bgc-pri);
  background-color: #fff;
  border-color: #fff;
}
.btn-icon:hover {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--bgc-pri);
}
.btn-danger-icon {
  color: #dc3545;
  background-color: #fff;
  border-color: #fff;
}
.btn-danger-icon:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
/*.btn-danger-icon:hover  {  color: #bb2d3b;         background-color: #b02a37;         border-color: #b02a37; }*/
.triBtm {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
}
.triBtmPrimary:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-top: solid 8px var(--bgc-pri);
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
}
.markLeftPrimary {
  border-left: 4px solid var(--bgc-pri) !important;
  background-color: #fbfbfb;
}
.markRightPrimary {
  border-left: 4px solid var(--bgc-pri) !important;
  background-color: #fbfbfb;
}
.markTopPrimary {
  border-left: 4px solid var(--bgc-pri) !important;
  background-color: #fbfbfb;
}
.markBottomPrimary {
  border-left: 4px solid var(--bgc-pri) !important;
  background-color: #fbfbfb;
}
.blMarkPrimary {
  border: 0px !important;
  border-left: 4px solid var(--bgc-pri) !important;
}
.brMarkPrimary {
  border: 0px !important;
  border-right: 4px solid var(--bgc-pri) !important;
}
.bbMarkPrimary {
  border: 0px !important;
  border-bottom: 4px solid var(--bgc-pri) !important;
}
.btMarkPrimary {
  border: 0px !important;
  border-top: 4px solid var(--bgc-pri) !important;
}
.blMarkSuccess {
  border: 0px !important;
  border-left: 4px solid #198754 !important;
}
.brMarkSuccess {
  border: 0px !important;
  border-right: 4px solid #198754 !important;
}
.bbMarkSuccess {
  border: 0px !important;
  border-bottom: 4px solid #198754 !important;
}
.btMarkSuccess {
  border: 0px !important;
  border-top: 4px solid #198754 !important;
}
.blMarkInfo {
  border: 0px !important;
  border-left: 4px solid #0dcaf0 !important;
}
.brMarkInfo {
  border: 0px !important;
  border-right: 4px solid #0dcaf0 !important;
}
.bbMarkInfo {
  border: 0px !important;
  border-bottom: 4px solid #0dcaf0 !important;
}
.btMarkInfo {
  border: 0px !important;
  border-top: 4px solid #0dcaf0 !important;
}
.blMarkWarning {
  border: 0px !important;
  border-left: 4px solid #ffc107 !important;
}
.brMarkWarning {
  border: 0px !important;
  border-right: 4px solid #ffc107 !important;
}
.bbMarkWarning {
  border: 0px !important;
  border-bottom: 4px solid #ffc107 !important;
}
.btMarkWarning {
  border: 0px !important;
  border-top: 4px solid #ffc107 !important;
}
.blMarkDanger {
  border: 0px !important;
  border-left: 4px solid #dc3545 !important;
}
.brMarkDanger {
  border: 0px !important;
  border-right: 4px solid #dc3545 !important;
}
.bbMarkDanger {
  border: 0px !important;
  border-bottom: 4px solid #dc3545 !important;
}
.btMarkDanger {
  border: 0px !important;
  border-top: 4px solid #dc3545 !important;
}
.bPrimary1 {
  border: 1px solid var(--bgc-pri);
}
.bPrimary2 {
  border: 2px solid var(--bgc-pri);
}
.bTrans2 {
  border: 2px solid transparent;
}
.bTrans1 {
  border: 1px solid transparent;
}
.blPrimary {
  border-left: 1px solid var(--bgc-pri) !important;
}
.brPrimary {
  border-right: 1px solid var(--bgc-pri) !important;
}
.bbPrimary {
  border-bottom: 1px solid var(--bgc-pri) !important;
}
.btPrimary {
  border-top: 1px solid var(--bgc-pri) !important;
}
.bxPrimary {
  border-left: 1px solid var(--bgc-pri) !important;
  border-right: 1px solid var(--bgc-pri) !important;
}
.byPrimary {
  border-top: 1px solid var(--bgc-pri) !important;
  border-bottom: 1px solid var(--bgc-pri) !important;
}
.blSecondary,
.blSuccess {
  border-left: 1px solid #198754 !important;
}
.brSecondary,
.brSuccess {
  border-right: 1px solid #198754 !important;
}
.bbSecondary,
.bbSuccess {
  border-bottom: 1px solid #198754 !important;
}
.btSecondary,
.btSuccess {
  border-top: 1px solid #198754 !important;
}
.blInfo {
  border-left: 1px solid #0dcaf0 !important;
}
.brInfo {
  border-right: 1px solid #0dcaf0 !important;
}
.bbInfo {
  border-bottom: 1px solid #0dcaf0 !important;
}
.btInfo {
  border-top: 1px solid #0dcaf0 !important;
}
.blWarning {
  border-left: 1px solid #ffc107 !important;
}
.brWarning {
  border-right: 1px solid #ffc107 !important;
}
.bbWarning {
  border-bottom: 1px solid #ffc107 !important;
}
.btWarning {
  border-top: 1px solid #ffc107 !important;
}
.blDanger {
  border-left: 1px solid #dc3545 !important;
}
.brDanger {
  border-right: 1px solid #dc3545 !important;
}
.bbDanger {
  border-bottom: 1px solid #dc3545 !important;
}
.btDanger {
  border-top: 1px solid #dc3545 !important;
}
.bsrPrimary {
  box-shadow: 0px 0px 6px 0px var(--bgc-pri) !important;;
}
.bslPrimary {
  box-shadow: 0px 0px 6px 0px var(--bgc-pri) !important;
}
.bsbGray {
  box-shadow: 2px 2px 4px 0px #eaeaea !important;
}
.bsbNone {
  box-shadow: 0 0 0 #eaeaea !important;
}
.flex {
  display: flex !important;
}
.inlineFlex {
  display: inline-flex !important;
}
.inline {
  display: inline !important;
}
.inlineBlock {
  display: inline-block !important;
}
.block {
  display: block !important;
}
.grid {
  display: grid !important;
}
.table {
  display: table !important;
}
.tableRow {
  display: table-row !important;
}
.ableCell {
  display: table-cell !important;
}
.listItem {
  display: list-item !important;
  margin: 2px;
}
.none {
  display: none !important;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.unset {
  position: unset;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mRelative {
    position: relative;
  }
  .mAbsolute {
    position: absolute;
  }
  .mStatic {
    position: static;
  }
  .mFixed {
    position: fixed;
  }
  .mUnset {
    position: unset;
  }
}
@media screen and (max-width: 649px) {
  .sRelative {
    position: relative;
  }
  .sAbsolute {
    position: absolute;
  }
  .sStatic {
    position: static;
  }
  .sFixed {
    position: fixed;
  }
  .sUnset {
    position: unset;
  }
}
.shadow {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.shadow-none {
  box-shadow: none !important;
}
.shadow-x {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}
.shadow-sm-x {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-lg-x {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.shadow-none-x {
  box-shadow: none !important;
}
.hidden {
  display: none !important;
}
.supress {
  display: none !important;
}
@media screen and (min-width: 1000px) {
  .bHidden {
    display: none !important;
  }
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mHidden {
    display: none !important;
  }
}
@media screen and (max-width: 649px) {
  .sHidden {
    display: none !important;
  }
}
.cross {
  padding: 0 0.21rem !important;
  border-radius: 3px;
  cursor: pointer;
}
.cross:hover {
  background-color: white;
  color: #dc3545;
}
/*=============================================== 
  Tabbed Styles 
  ===============================================*/
.tabbed {
  width: 100%;
  margin: 0 auto;
  border-bottom: 4px solid var(--bgc-pri);
  display: inline-block;
  /*overflow: hidden;*/
  transition: border 250ms ease;
  background-color: var(--bgc-ter);
}
.tabbed ul {
  margin: 0px;
  padding: 0px;
  float: left;
  list-style-type: none;
  position: relative;
  /*.flexRowWrap;*/
}
.tabbed ul li {
  display: block;
  float: left;
  padding: 10px 18px 8px;
  margin-right: 20px;
  z-index: 2;
  position: relative;
  cursor: pointer;
  background-color: white;
  color: var(--bgc-pri);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
  line-height: 21px;
  transition: all 250ms ease;
}
.tabbed ul li:before,
.tabbed ul li:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 21px;
  background-color: white;
  transition: all 250ms ease;
}
.tabbed ul li:before {
  right: -10px;
  transform: skew(30deg, 0deg);
  /*box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;*/
}
.tabbed ul li:after {
  left: -10px;
  transform: skew(-30deg, 0deg);
  box-shadow: rgba(0, 0, 0, 0.1) -3px 2px 5px, inset rgba(255, 255, 255, 0.09) 1px 0;
}
/*.tabbed ul li:first-child:before, .tabbed ul li:first-child:after{
  background-color: #fff; 
}*/
.tabbed ul li:first-child {
  margin-left: -5px;
  /*  background-color: #fff; 
    color: var(--bgc-pri);
    font-size: 1.5rem;  */
}
.tabbed ul li:hover,
.tabbed ul li:hover:before,
.tabbed ul li:hover:after {
  background-color: var(--bgc-ter);
  color: var(--fc-sec);
}
.tabbed ul li.active {
  z-index: 3;
}
.tabbed ul li.active,
.tabbed ul li.active:before,
.tabbed ul li.active:after {
  background-color: var(--bgc-pri);
  color: var(--fc-ter);
}
/*.tabbed ul li.active:first-child,
.tabbed ul li.active:first-child:before,
.tabbed ul li.active:first-child:after {
  background-color: #fff; 
  color: var(--bgc-pri);
}*/
/*----- Round Tabs -----*/
.tabbed.round ul li {
  border-radius: 8px 8px 0 0;
}
.tabbed.round ul li:before {
  border-radius: 0 8px 0 0;
}
.tabbed.round ul li:after {
  border-radius: 8px 0 0 0;
}
.avatar {
  padding: 3px;
}
.avatarIcon {
  display: inline-block;
  font-size: 1em;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  color: var(--bgc-pri);
  vertical-align: middle;
  margin: auto 0;
  box-shadow: rgb(0 0 0 / 10%) -3px 2px 5px, inset rgb(255 255 255 / 9%) 1px 0;
}
.changePswdBox,
.avatarOp {
  right: 0 !important;
  left: auto !important;
  position: absolute;
  left: 0;
  z-index: 1000;
  min-width: 12rem;
  margin: .125rem 0 0;
  font-size: .85rem;
  color: #858796;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e3e6f0;
  border-radius: .35rem;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  overflow-y: scroll !important;
}
.changePswdBox {
  top: 2rem;
  padding: 1.5rem !important;
}
@media screen and (max-width: 649px) {
  .tabbed ul {
    float: none !important;
  }
  .tabbed ul li:not(.active):not(.smallShow):not(:first-child) {
    display: none;
  }
  .tabbed ul li {
    display: block;
    /*float: none !important;*/
  }
}
/* 
.tabbed[class*="skin-"] ul li {
  color: #FFF;
  text-shadow: rgba(0,0,0,.1) 0 1px;
}

a.iprodev {
  line-height: normal;
  font-family: Varela Round, sans-serif;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  color: #A7AAAE;
  position: fixed;
  left: 20px;
  bottom: 20px;
  border: 1px solid #A7AAAE;
  padding: 12px 20px 10px;
  border-radius: 50px;
  transition: all .1s ease-in-out;
  text-transform: uppercase;
}
a.iprodev:hover {
  background: #A7AAAE;
  color: white;
} */
/*================================================ 
  Date picker START 
  ================================================*/
.dp {
  display: grid;
  grid-template-columns: 35px 35px 35px 35px 35px 35px 35px;
  position: absolute;
  padding: 0px;
  border: 1px solid var(--br-pri);
  box-shadow: 1px 1px 4px 0px;
  color: var(--bgc-pri);
  margin: 0px;
  background-color: white;
  z-index: 1000;
  cursor: default;
}
.dp-span3 {
  grid-column: 3 / span 3;
}
.dp > div {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid transparent;
}
.wk {
  letter-spacing: 1px;
}
.day {
  color: black;
}
.amberDate {
  background-color: #fff5eb;
}
.navDate {
  border: 1px solid var(--bgc-pri);
  border-radius: 3px;
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
}
.navDate[class*="insenstv"] {
  border: 1px solid red;
  border-radius: 3px;
  color: white;
  background-color: red;
}
.insenstv {
  color: red;
}
.nonCr {
  color: #888888;
}
.nonCr[class*="insenstv"] {
  color: red;
}
.note {
  position: relative;
}
.note:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  display: block;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-top: 6px solid #f00;
}
.ymSlctr {
  position: relative;
}
.ymSlctrBtn {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  line-height: 25px;
  border: 1px solid var(--bgc-pri);
  z-index: calc(1004);
  position: absolute;
  background-color: var(--bgc-pri);
  color: var(--fc-pri);
  border-radius: 4px;
}
.ymSlctrBtn[open="1"] {
  border-top: 1px solid var(--bgc-pri);
  border-left: 1px solid var(--bgc-pri);
  border-right: 1px solid var(--bgc-pri);
  border-bottom: 1px solid white;
  background-color: var(--fc-pri);
  color: var(--bgc-pri);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.ymSlctrPnl {
  left: -67px;
  top: 28px;
  width: 235px;
  background-color: white;
  position: absolute;
  border: 1px solid var(--bgc-pri);
  display: flex;
  z-index: calc(1002);
}
.mnthPckr {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 80px;
  padding-left: 4px;
}
.mnthPckr span {
  padding: 8px 12px;
  position: relative;
}
.mnthPckr span:hover {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--br-pri);
}
.yearPckr {
  height: 170px;
  overflow-y: scroll;
  position: relative;
  padding: 5px;
}
.yearPckr li {
  padding: 4px 12px;
  position: relative;
}
.yearPckr li:hover {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--br-pri);
}
.dp_sel:after {
  position: absolute;
  padding: 0 2px;
  top: 5px;
  left: 0px;
  content: "\2713";
  color: white;
  background-color: green;
  border-radius: 9px;
  font-size: 8px;
}
.dpSpotGrp {
  line-height: 6px;
  margin: auto;
}
.dpSpot {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
}
.dpSpotRed {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: red;
}
.dpSpotC1 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #36A2EB;
}
.dpSpotC2 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #FF3784;
}
.dpSpotC3 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #4BC0C0;
}
.dpSpotC4 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #F77825;
}
.dpSpotC5 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #9966FF;
}
.dpSpotC6 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #00A8C6;
}
.dpSpotC7 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #379F7A;
}
.dpSpotC8 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #CC2738;
}
.dpSpotC9 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #8B628A;
}
.dpSpotC10 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #8FBE00;
}
.dpSpotC11 {
  height: 6px;
  width: 6px;
  margin-left: 2px;
  display: inline-block;
  border-radius: 50%;
  background-color: #606060;
}
.hilight {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
}
.hilight1 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #36A2EB;
}
.hilight2 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #FF3784;
}
.hilight3 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #4BC0C0;
}
.hilight4,
.hilightAmber {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #F77825;
}
.hilight5 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #9966FF;
}
.hilight6 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #00A8C6;
}
.hilight7,
.hilightGreen {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #379F7A;
}
.hilight8,
.hilightRed {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #CC2738;
}
.hilight9 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #8B628A;
}
.hilight10 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #8FBE00;
}
.hilight11,
.hilightGray {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #606060;
}
.hilight12 {
  color: white;
  display: inline-block;
  padding: 0px 8px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #dddddd;
}
.hilightFc1 {
  color: #36A2EB;
}
.hilightFc2 {
  color: #FF3784;
}
.hilightFc3 {
  color: #4BC0C0;
}
.hilightFc4 {
  color: #F77825;
}
.hilightFc5 {
  color: #9966FF;
}
.hilightFc6 {
  color: #00A8C6;
}
.hilightFc7 {
  color: #379F7A;
}
.hilightFc8 {
  color: #CC2738;
}
.hilightFc9 {
  color: #8B628A;
}
.hilightFc10 {
  color: #8FBE00;
}
.hilightFc11 {
  color: #606060;
}
.hilightFc12 {
  color: #dddddd;
}
.hilightThin {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
}
.hilightThin1 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #36A2EB;
}
.hilightThin2 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #FF3784;
}
.hilightThin3 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #4BC0C0;
}
.hilightThin4,
.hilightThinAmber {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #F77825;
}
.hilightThin5 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #9966FF;
}
.hilightThin6 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #00A8C6;
}
.hilightThin7,
.hilightThinGreen {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #379F7A;
}
.hilightThin8,
.hilightThinRed {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #CC2738;
}
.hilightThin9 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #8B628A;
}
.hilightThin10 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #8FBE00;
}
.hilightThin11,
.hilightThinGray {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #606060;
}
.hilightThin12 {
  color: white;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  align-self: center !important;
  background-color: #dddddd;
}
.bRadLeft0 {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.bRadRight0 {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
/*================================================ 
  Date picker END 
  ================================================*/
/***********Datasource START*************/
.dsCntnr {
  margin-top: 5px;
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 50%;
  overflow-y: auto;
}
.dsAddViewCntnr {
  margin-top: 5px;
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.2);
}
.dsHead {
  display: block;
  border-bottom: 2px solid transparent;
  margin: 0px;
  padding: 2px;
  width: 100%;
}
.dsBody {
  display: grid;
  margin: 0px;
  padding: 0px;
  border: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  min-width: 100%;
}
.dsItem {
  line-height: 1.5rem;
  margin: 0;
  padding: 0.5rem;
  cursor: pointer;
  position: relative;
  color: var(--br-pri);
  display: inline-block;
  overflow: hidden;
  width: 100%;
  background-color: transparent;
  border-left: 8px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.dsItem:hover {
  border-left: 8px solid var(--bgc-pri);
  background: rgba(180, 182, 184, 0.2);
}
.dsItem:hover[slctd="1"] {
  background-color: #CCFFCC;
}
.dsItem input {
  margin: 0 5px;
}
.dsItemNavgt {
  border-left: 8px solid var(--bgc-pri);
  background: rgba(180, 182, 184, 0.2);
}
.selectedOptn {
  color: #005eff;
}
/***********Datasouce END**************/
/*================================================ 
  Dropdown style 
  ================================================*/
.dropdown-menu-left {
  right: auto !important;
  left: 0 !important;
}
.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}
.dropdown-menu.show {
  width: auto;
  display: block;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: .5rem 1rem;
  clear: both;
  font-weight: 400;
  color: #3a3b45;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #eaecf4;
}
/*================================================ 
   Flex 
  ================================================*/
.flexCol {
  display: flex;
  flex-flow: column nowrap;
}
.flexColWrap {
  display: flex;
  flex-flow: column wrap;
}
.flexColRev {
  display: flex;
  flex-flow: column-reverse nowrap;
}
.flexColRevWrap {
  display: flex;
  flex-flow: column-reverse wrap;
}
.flexRow {
  display: flex;
  flex-flow: row nowrap;
}
.flexRowWrap {
  display: flex;
  flex-flow: row wrap;
}
.flexRowRev {
  display: flex;
  flex-flow: row-reverse nowrap;
}
.flexRowRevWrap {
  display: flex;
  flex-flow: row-reverse wrap;
}
.flexColImp {
  display: flex;
  flex-flow: column nowrap !important;
}
.flexColWrapImp {
  display: flex;
  flex-flow: column wrap !important;
}
.flexColRevImp {
  display: flex;
  flex-flow: column-reverse nowrap !important;
}
.flexColRevWrapImp {
  display: flex;
  flex-flow: column-reverse wrap !important;
}
.flexRowImp {
  display: flex;
  flex-flow: row nowrap !important;
}
.flexRowWrapImp {
  display: flex;
  flex-flow: row wrap !important;
}
.flexRowRevImp {
  display: flex;
  flex-flow: row-reverse nowrap !important;
}
.flexRowRevWrapImp {
  display: flex;
  flex-flow: row-reverse wrap !important;
}
.flexNoShrink {
  flex-shrink: 0;
}
.flexMid {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fAuto {
  flex: auto;
}
.flexBasis {
  flex-basis: content;
}
.fItemGrow {
  flex-grow: 1;
}
.fItemNoGrow {
  flex-grow: 0;
}
.justifyContentStart {
  justify-content: flex-start !important;
}
.justifyContentEnd {
  justify-content: flex-end !important;
}
.justifyContentCenter {
  justify-content: center !important;
}
.justifyContentBetween {
  justify-content: space-between !important;
}
.justifyContentAround {
  justify-content: space-around !important;
}
.alignSelfAuto {
  align-self: auto !important;
}
.alignSelfStart {
  align-self: flex-start !important;
}
.alignSelfEnd {
  align-self: flex-end !important;
}
.alignSelfCenter {
  align-self: center !important;
}
.alignSelfBaseline {
  align-self: baseline !important;
}
.alignSelfStretch {
  align-self: stretch !important;
}
.alignContentStart {
  align-content: flex-start !important;
}
.alignContentEnd {
  align-content: flex-end !important;
}
.alignContentCenter {
  align-content: center !important;
}
.flexGrow {
  flex: 1;
}
.flexNone {
  flex: none !important;
}
.alignItemsAuto {
  align-items: auto !important;
}
.alignItemsStart {
  align-items: flex-start !important;
}
.alignItemsEnd {
  align-items: flex-end !important;
}
.alignItemsCenter {
  align-items: center !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mFlexCol {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .mFlexColWrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .mFlexColRev {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }
  .mFlexColRevWrap {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  .mFlexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .mFlexRowWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mFlexRowRev {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
  }
  .mFlexRowRevWrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
  .mFlexMid {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mFItemGrow {
    flex-grow: 1;
  }
  .mFItemNoGrow {
    flex-grow: 0;
  }
  .mJustifyContentStart {
    justify-content: flex-start !important;
  }
  .mJustifyContentEnd {
    justify-content: flex-end !important;
  }
  .mJustifyContentCenter {
    justify-content: center !important;
  }
  .mJustifyContentBetween {
    justify-content: space-between !important;
  }
  .mJustifyContentAround {
    justify-content: space-around !important;
  }
  .mAlignSelfAuto {
    align-self: auto !important;
  }
  .mAlignSelfStart {
    align-self: flex-start !important;
  }
  .mAlignSelfEnd {
    align-self: flex-end !important;
  }
  .mAlignSelfCenter {
    align-self: center !important;
  }
  .mAlignSelfBaseline {
    align-self: baseline !important;
  }
  .mAlignSelfStretch {
    align-self: stretch !important;
  }
  .mAlignItemsAuto {
    align-items: auto !important;
  }
  .mAlignItemsStart {
    align-items: flex-start !important;
  }
  .mAlignItemsEnd {
    align-items: flex-end !important;
  }
  .mAlignItemsCenter {
    align-items: center !important;
  }
}
.flexDirectionRow {
  flex-direction: row !important;
}
@media screen and (max-width: 649px) {
  .sFlexCol {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .sFlexColWrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .sFlexColRev {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }
  .sFlexColRevWrap {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  .sFlexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .sFlexRowWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sFlexRowRev {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
  }
  .sFlexRowRevWrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
  .sFlexMid {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sFItemGrow {
    flex-grow: 1;
  }
  .sFItemNoGrow {
    flex-grow: 0;
  }
  .sJustifyContentStart {
    justify-content: flex-start !important;
  }
  .sJustifyContentEnd {
    justify-content: flex-end !important;
  }
  .sJustifyContentCenter {
    justify-content: center !important;
  }
  .sJustifyContentBetween {
    justify-content: space-between !important;
  }
  .sJustifyContentAround {
    justify-content: space-around !important;
  }
  .sAlignSelfAuto {
    align-self: auto !important;
  }
  .sAlignSelfStart {
    align-self: flex-start !important;
  }
  .sAlignSelfEnd {
    align-self: flex-end !important;
  }
  .sAlignSelfCenter {
    align-self: center !important;
  }
  .sAlignSelfBaseline {
    align-self: baseline !important;
  }
  .sAlignSelfStretch {
    align-self: stretch !important;
  }
  .sAlignItemsAuto {
    align-items: auto !important;
  }
  .sAlignItemsStart {
    align-items: flex-start !important;
  }
  .sAlignItemsEnd {
    align-items: flex-end !important;
  }
  .sAlignItemsCenter {
    align-items: center !important;
  }
}
/*================================================*/
/*================================================ 
   Layouts 
  ================================================*/
.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.layerBody {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 0;
  background-color: #f8f8f8;
}
.layerBorderPrimary {
  border: 4px solid var(--bgc-pri);
}
.layerMask {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: black;
  opacity: 0.5;
}
.container {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
.card {
  position: relative;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e3e6f0;
  border-radius: 3px;
}
.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row {
  width: 100%;
}
.rowPt25 {
  height: calc(1rem * 0.5);
}
.rowPt5 {
  height: calc(1rem * 1);
}
.rowPt75 {
  height: calc(1rem * 1.5);
}
.row1 {
  height: calc(1rem * 2);
}
.row1_12 {
  height: calc(1rem * 2.35);
}
.row1_25 {
  height: calc(1rem * 2.5);
}
.row1_5 {
  height: calc(1rem * 3);
}
.row1_75 {
  height: calc(1rem * 3.5);
}
.row2 {
  height: calc(1rem * 4);
}
.row3 {
  height: calc(1rem * 6);
}
.row4 {
  height: calc(1rem * 8);
}
.row5 {
  height: calc(1rem * 10);
}
.row6 {
  height: calc(1rem * 12);
}
.row7 {
  height: calc(1rem * 14);
}
.row8 {
  height: calc(1rem * 16);
}
.row9 {
  height: calc(1rem * 18);
}
.row10 {
  height: calc(1rem * 20);
}
.row11 {
  height: calc(1rem * 22);
}
.row12 {
  height: calc(1rem * 24);
}
.row13 {
  height: calc(1rem * 26);
}
.row14 {
  height: calc(1rem * 28);
}
.row15 {
  height: calc(1rem * 30);
}
.row16 {
  height: calc(1rem * 32);
}
.row17 {
  height: calc(1rem * 34);
}
.row18 {
  height: calc(1rem * 36);
}
.row19 {
  height: calc(1rem * 38);
}
.row20 {
  height: calc(1rem * 40);
}
.row21 {
  height: calc(1rem * 42);
}
.row22 {
  height: calc(1rem * 44);
}
.row23 {
  height: calc(1rem * 46);
}
.row24 {
  height: calc(1rem * 48);
}
.col {
  flex: 0 0 auto;
  float: left;
  position: relative;
}
.colAuto {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: auto;
}
.col1em {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 1em !important;
}
.col1 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 4.1666%;
}
.col2 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 8.3333%;
}
.col3 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 12.4999%;
}
.col4 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 16.6666%;
}
.col5 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 20.8333%;
}
.col6,
.colQuarter {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 24.7%;
}
.col7 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 29.1666%;
}
.col8,
.colThird {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 33%;
}
.col9 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 36.49999%;
}
.col10 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 41.66666%;
}
.col11 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 45.83333%;
}
.col12,
.colHalf {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 49.5%;
}
.col13 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 54.16666%;
}
.col14 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 58.33333%;
}
.col15 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 61.49999%;
}
.col16,
.colTwothird {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 66.66%;
}
.col17 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 70.83333%;
}
.col18,
.colThreequarter {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 74.8%;
}
.col19 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 79.16666%;
}
.col20 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 83.33333%;
}
.col21 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 86.49999%;
}
.col22 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 91.66666%;
}
.col23 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 95.83333%;
}
.col24 {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 99.99999%;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mCol1 {
    width: 4.1666% !important;
  }
  .mCol2 {
    width: 8.3333% !important;
  }
  .mCol3 {
    width: 12.4999% !important;
  }
  .mCol4 {
    width: 16.6666% !important;
  }
  .mCol5 {
    width: 20.8333% !important;
  }
  .mCol6 {
    width: 24.7% !important;
  }
  .mCol7 {
    width: 29.1666% !important;
  }
  .mCol8 {
    width: 33% !important;
  }
  .mCol9 {
    width: 36.49999% !important;
  }
  .mCol10 {
    width: 41.66666% !important;
  }
  .mCol11 {
    width: 45.83333% !important;
  }
  .mCol12 {
    width: 49.5% !important;
  }
  .mCol13 {
    width: 54.16666% !important;
  }
  .mCol14 {
    width: 58.33333% !important;
  }
  .mCol15 {
    width: 61.49999% !important;
  }
  .mCol16 {
    width: 66.66% !important;
  }
  .mCol17 {
    width: 70.83333% !important;
  }
  .mCol18 {
    width: 74.8% !important;
  }
  .mCol19 {
    width: 79.16666% !important;
  }
  .mCol20 {
    width: 83.33333% !important;
  }
  .mCol21 {
    width: 86.49999% !important;
  }
  .mCol22 {
    width: 91.66666% !important;
  }
  .mCol23 {
    width: 95.83333% !important;
  }
  .mCol24 {
    width: 99.99999% !important;
  }
  /* .colAuto           { width:auto;      } 
  .col1rem           { width:2rem;      } 
  .col1              { width:8.3333%;   }
  .col2              { width:16.6666%;  }
  .col3              { width:24.7%;     }
  .col4              { width:33%;       }
  .col5              { width:41.66666%; }
  .col6, .colQuarter { width:49.5%;     }
  .col7              { width:58.33333%; }
  .col8,.colThird    { width:66.66%;    }
  .col9              { width:74.8%;     }
  .col10             { width:83.33333%; } 
  .col11             { width:91.66666%; }
  .col12,.colHalf, 
  .col13, .col14, 
  .col15, .col16,
  .colTwothird, 
  .col17, .col18,
  .colThreequarter, 
  .col19, .col20, 
  .col21, .col22,
  .col23, .col24    { width:99.99999%;       } */
}
@media screen and (max-width: 649px) {
  .sCol1 {
    width: 4.1666% !important;
  }
  .sCol2 {
    width: 8.3333% !important;
  }
  .sCol3 {
    width: 12.4999% !important;
  }
  .sCol4 {
    width: 16.6666% !important;
  }
  .sCol5 {
    width: 20.8333% !important;
  }
  .sCol6 {
    width: 24.7% !important;
  }
  .sCol7 {
    width: 29.1666% !important;
  }
  .sCol8 {
    width: 33% !important;
  }
  .sCol9 {
    width: 36.49999% !important;
  }
  .sCol10 {
    width: 41.66666% !important;
  }
  .sCol11 {
    width: 45.83333% !important;
  }
  .sCol12 {
    width: 49.5% !important;
  }
  .sCol13 {
    width: 54.16666% !important;
  }
  .sCol14 {
    width: 58.33333% !important;
  }
  .sCol15 {
    width: 61.49999% !important;
  }
  .sCol16 {
    width: 66.66% !important;
  }
  .sCol17 {
    width: 70.83333% !important;
  }
  .sCol18 {
    width: 74.8% !important;
  }
  .sCol19 {
    width: 79.16666% !important;
  }
  .sCol20 {
    width: 83.33333% !important;
  }
  .sCol21 {
    width: 86.49999% !important;
  }
  .sCol22 {
    width: 91.66666% !important;
  }
  .sCol23 {
    width: 95.83333% !important;
  }
  .sCol24 {
    width: 99.99999% !important;
  }
  /*
  .colAuto                { width:auto;            } 
  .col1rem                { width:2rem             } 
  .col1                   { width:16.6666%;        }
  .col2                   { width:33%;             }
  .col3                   { width:49.5%;           }
  .col4                   { width:66.66%;          }
  .col5                   { width:83.33333%;       }
  .col6,.colQuarter, 
  .col7, 
  .col8, .colThird, 
  .col9, .col10, 
  .col11, 
  .col12, .colHalf, 
  .col13, .col14, 
  .col15, 
  .col16, .colTwothird, 
  .col17, 
  .col18, .colThreequarter, 
  .col19, .col20, 
  .col21, .col22, 
  .col23, .col24         { width:99.99999%;       } */
}
/*================================================*/
/*================================================ 
   Backgrounds 
  ================================================*/
.fullBg {
  background-repeat: no-repeat;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.bgCloud {
  background-repeat: no-repeat;
  width: 100%;
  max-width: 100%;
  height: auto;
  background-image: url("../isl/bg_cloud.svg");
}
.bgcTer {
  fill: var(--bgc-ter);
}
/*================================================ 
   Login 
  ================================================*/
.appLogoLogin {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.loginClip1 {
  align-self: flex-start;
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 33%;
  margin-right: auto !important;
  margin-left: auto !important;
}
.superCntnr {
  flex: 0 0 auto;
  float: left;
  position: relative;
  width: 29.1666%;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  background-color: #fff !important;
  padding: 1.5rem !important;
  margin: 1.5rem !important;
  overflow: hidden !important;
}
.accounts,
.loginForm {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  align-self: flex-start;
  width: 100%;
  background-color: #fff !important;
}
.accountsList {
  max-height: 260px;
  overflow: auto !important;
}
.account {
  background-color: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.loginFormItem {
  /*background-color: #f5f5f5;*/
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  outline: none;
}
.loginFormItem input {
  border: 0px solid transparent;
}
.loginBack {
  font-size: 2rem !important;
  border-radius: 1rem;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .loginClip1 {
    flex: 0 0 auto;
    float: left;
    position: relative;
    width: 33%;
  }
  .superCntnr {
    flex: 0 0 auto;
    float: left;
    position: relative;
    width: 49.5%;
  }
  .accountsList {
    max-height: 200px;
    overflow: auto !important;
  }
}
@media screen and (max-width: 649px) {
  .appLogoLogin {
    max-width: 30%;
    margin-top: 3rem !important;
    margin-bottom: 0.25rem !important;
  }
  .loginClip1 {
    display: none;
  }
  .superCntnr {
    flex: 0 0 auto;
    float: left;
    position: relative;
    width: 91.66666%;
  }
  .accountsList {
    max-height: 260px;
    overflow: auto !important;
  }
}
/*================================================*/
.highlightBottom:after {
  content: "\00a0";
  background-color: red;
  border-radius: 3px;
  position: absolute;
  transform: rotate(270deg);
  transform-origin: bottom;
  padding-top: 5px;
}
/*================================================ 
   Dashboard 
  ================================================*/
.fxnSearch {
  padding: 0.5rem;
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 5px;
  position: sticky;
  top: 0px;
  background-color: white;
  z-index: 4;
}
.fxnCard {
  width: 25%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden !important;
  background-color: white;
}
.fxnGrpList {
  width: 100%;
  position: relative;
}
.fxn {
  line-height: 1.5rem;
  margin: 0;
  padding: 0.5rem;
  cursor: pointer;
  position: relative;
  color: var(--br-pri);
  display: inline-block;
  overflow: hidden;
  width: 100%;
  background-color: transparent;
  border-left: 8px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.lnkdFxn {
  position: relative;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 2px solid transparent;
  padding: 6px;
  border-radius: 3px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  align-self: center;
}
/*.fxn:hover{
  border-left : 8px solid var(--bgc-pri);
  background : rgba(180, 182, 184, 0.2);
}*/
.fxnSlct {
  border-left: 8px solid var(--bgc-pri);
  background: rgba(180, 182, 184, 0.2);
}
.fxnGrp:hover,
.fxnWidget:hover,
.searchWidget:hover {
  background-color: #F5F5F5;
}
.searchWidget:hover .lnkdFxn,
.fxnWidget:hover .lnkdFxn {
  background-color: #dddddd;
}
.lnkdFxn:hover {
  background-color: var(--bgc-pri) !important;
  color: #fff !important;
}
.fxnWidget {
  display: flex;
  flex-flow: row nowrap;
  position: absolute;
  z-index: 1;
  width: 100%;
}
.partTwo {
  width: 80%;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  display: flex;
  flex-flow: column nowrap;
}
.settingsCard {
  width: 100% !important;
  color: var(--bgc-pri);
}
.widgetCard {
  padding: 0.5rem !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  background-color: #f8f8f8;
}
.widget {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget10 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget20 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget11 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget12 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget21 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget22 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget31 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget32 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget41 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget42 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget51 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget52 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget61 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget62 {
  display: block;
  position: absolute;
  padding: 1rem 0 0 1rem;
  z-index: 1;
}
.widget .muuri-item-dragging,
.fxnWidget .muuri-item-dragging {
  z-index: 3;
}
.widget .muuri-item-releasing,
.fxnWidget .muuri-item-dragging {
  z-index: 2;
}
.widget .muuri-item-hidden,
.fxnWidget .muuri-item-dragging {
  z-index: 0;
}
.item-content-head {
  width: 100% !important;
  text-align: center !important;
  font-size: 1.25rem !important;
  padding: 1rem !important;
  border-bottom: 1px solid lightgray;
}
.item-content,
.item-content-body {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid lightgray;
  background-color: white;
}
.item-content::before {
  content: '⠿';
  position: absolute;
  top: 3px;
  left: 0px;
  width: 10px;
  height: 25px;
  color: white;
  background-color: var(--bgc-pri);
  cursor: move;
  z-index: 2;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  align-items: center;
  /* vertical center */
  justify-content: center;
  /* horizontal center */
}
.item-content-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.isLoading .image,
.isLoading h2,
.isLoading p {
  background: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}
.isLoading h2 {
  height: 30px;
  margin: 2rem;
}
.isLoading p {
  height: 70px;
  margin: 2rem;
}
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .fxnCard {
    width: 50%;
  }
  .partTwo {
    width: 50%;
  }
}
@media screen and (max-width: 649px) {
  .fxnCard {
    width: 100%;
    height: calc(1rem * 40);
  }
  .partTwo {
    padding: 0.5rem !important;
    width: 100%;
  }
}
/*================================================ 
 UI 
================================================*/
.rowCntrl {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 5px;
}
.rowCntrlRev {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 5px;
  flex-direction: row-reverse !important;
}
.colCntrl {
  display: flex;
  flex-direction: column !important;
  align-self: flex-start;
  padding: 5px;
}
.colCntrlRev {
  display: flex;
  flex-direction: column !important;
  align-self: flex-start;
  padding: 5px;
  flex-direction: column-reverse !important;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mRowCntrl {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 5px;
  }
  .mRowCntrlRev {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 5px;
    flex-direction: row-reverse !important;
  }
  .mColCntrl {
    display: flex;
    flex-direction: column !important;
    align-self: flex-start;
    padding: 5px;
  }
  .mColCntrlRev {
    display: flex;
    flex-direction: column !important;
    align-self: flex-start;
    padding: 5px;
    flex-direction: column-reverse !important;
  }
}
@media screen and (max-width: 649px) {
  .sRowCntrl {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 5px;
  }
  .sRowCntrlRev {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 5px;
    flex-direction: row-reverse !important;
  }
  .sColCntrl {
    display: flex;
    flex-direction: column !important;
    align-self: flex-start;
    padding: 5px;
  }
  .sColCntrlRev {
    display: flex;
    flex-direction: column !important;
    align-self: flex-start;
    padding: 5px;
    flex-direction: column-reverse !important;
  }
}
.inputWithClip {
  position: relative;
  display: flex;
  align-items: stretch;
}
.inputClipLeft {
  display: flex;
  border: 1px solid gray;
  border-right: 0;
  border-radius: .25rem 0 0 .25rem;
  border-color: silver;
  color: var(--bgc-pri);
}
.inputClipRight {
  display: flex;
  border: 1px solid gray;
  border-left: 0;
  border-radius: 0 .25rem .25rem 0;
  border-color: silver;
  color: var(--bgc-pri);
}
.inputClipLeft i,
.inputClipRight i {
  width: 30px;
  text-align: center;
}
.inputRightRad {
  border-radius: 0 .25rem .25rem 0 !important;
}
.inputLeftRad {
  border-radius: .25rem 0 0 .25rem !important;
}
.inputWithClip .input {
  width: calc(100% - 30px);
}
.lable {
  color: gray;
  /*padding : 5px;*/
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border: 1px solid transparent;
  /*align-self : center; 
   .textOverflowDoted; */
}
.colCntrl > .lable,
.mColCntrl > .lable,
.sColCntrl > .lable,
.colCntrlRev > .lable,
.mColCntrlRev > .lable,
.sColCntrlRev > .lable {
  /*padding-bottom: 0px !important;*/
  padding: 0px;
  /* align-self : left;*/
}
.rowCntrl > .lable,
.mRowCntrl > .lable,
.sRowCntrl > .lable {
  padding: 0px;
  padding-right: 5px;
}
.rowCntrlRev > .lable,
.mRowCntrlRev > .lable,
.sRowCntrlRev > .lable {
  padding: 0px;
  padding-left: 5px;
}
.inputRo {
  /*padding:5px;*/
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border: 1px solid transparent;
  /*align-self: center;*/
  /* .textOverflowDoted; */
}
.tooltipIndctr {
  position: relative;
}
.tooltipIndctr::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: gray;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.colCntrl > .inputRo,
.mColCntrl > .inputRo,
.sColCntrl > .inputRo,
.colCntrlRev > .inputRo,
.mColCntrlRev > .inputRo,
.sColCntrlRev > .inputRo {
  padding-top: 0px !important;
  /*align-self : left;*/
}
.input {
  border: 1px solid #ADADAD;
  border-radius: .25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  /*padding:5px;*/
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  /*align-self: center;*/
}
.inputLineBorder > .inputClipLeft,
.inputLineBorder > .inputClipRight,
.inputLineBorder > .inputRightRad,
.inputLineBorder > .inputLeftRad,
.input.inputLineBorder {
  /* No Space between the class; Which represent having teo classes  */
  border-width: 0px 0px 1px 0px !important;
  border-radius: 0px !important;
  border-color: silver;
  /*padding: 2px 5px;*/
}
/*
.colCntrl > .input,    .mColCntrl > .input,    .sColCntrl > .input,
.colCntrlRev > .input, .mColCntrlRev > .input, .sColCntrlRev > .input {
  padding-top: 0px !important;
}*/
.disabled {
  pointer-events: none;
  /* No clicking, no focus */
  opacity: 0.6;
  /* Looks disabled */
}
.box-pri {
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #fff !important;
}
.box-sec {
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #fbfbfb;
}
.box-yel {
  border: 1px solid #f5f5b8;
  border-radius: 5px;
  background-color: #FFFFF0;
}
@media screen and (max-width: 649px) {
  .sBox-pri {
    border: 1px solid #dddddd;
    border-radius: 5px;
    background-color: #fff !important;
  }
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mBox-pri {
    border: 1px solid #dddddd;
    border-radius: 5px;
    background-color: #fff !important;
  }
}
.box-gray {
  border: 1px solid #dddddd;
  background-color: #f8f8f8 !important;
}
.box-pri-round {
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #fff !important;
  border-radius: 3px;
}
.box-gray-round {
  border: 1px solid #dddddd;
  background-color: #f8f8f8 !important;
  border-radius: 3px;
}
.collection {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #999 #f0f0f0;
}
.collection::-webkit-scrollbar {
  width: 8px;
}
.collection::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.collection::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}
.collection::-webkit-scrollbar-thumb:hover {
  background: #666;
}
.collectionHead {
  width: 100%;
}
.collectionFooter {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}
.collectionHeadSearch {
  border: 1px solid #ADADAD;
  border-radius: .25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  /*padding:5px;*/
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  /*align-self: center;*/
  align-self: center !important;
  border-radius: 10px;
  border: 4px solid var(--bgc-pri);
}
.infoMsg,
.collectionHeadInfo {
  position: relative;
  cursor: pointer;
  align-self: center !important;
  display: inline-block;
  background-color: white;
  color: var(--bgc-pri);
  margin: 0.5rem !important;
}
.infoMsgBody,
.collectionHeadMoreInfo {
  height: 0px;
  width: 0px;
  opacity: 0;
  display: none;
}
.infoMsg:hover .infoMsgBody,
.collectionHeadInfo:hover .collectionHeadMoreInfo {
  display: initial;
  height: auto;
  width: auto;
  position: absolute;
  margin-top: 5px;
  padding: 5px;
  border-radius: 3px;
  opacity: 1;
  transition: opacity 1s;
  white-space: pre;
  border: 2px solid #eaeaea;
  z-index: 1080;
  box-shadow: 1px 1px 2px 0px;
  background-color: #484848;
  color: white;
}
.tooltip {
  z-index: 9999;
  position: absolute;
  background: black;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: arial;
  font-size: 12px;
  text-shadow: 0px 0px 0px white;
  color: white;
}
.tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
  position: absolute;
  bottom: -5px;
  left: 5px;
}
.tooltipLeft {
  z-index: 9999;
  position: absolute;
  background: black;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: arial;
  font-size: 12px;
  text-shadow: 0px 0px 0px white;
  color: white;
}
.tooltipLeft:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
  position: absolute;
  bottom: -5px;
  right: 10px;
}
.tooltipBottom {
  z-index: 9999;
  position: absolute;
  background: black;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: arial;
  font-size: 12px;
  text-shadow: 0px 0px 0px white;
  color: white;
}
.tooltipBottom:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  position: absolute;
  top: -5px;
  left: 5px;
}
.tooltipBottomLeft {
  z-index: 9999;
  position: absolute;
  background: black;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: arial;
  font-size: 12px;
  text-shadow: 0px 0px 0px white;
  color: white;
}
.tooltipBottomLeft:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  position: absolute;
  top: -5px;
  right: 10px;
}
.collectionBody {
  width: 100%;
  /*.ofxHidden;*/
}
.cntrlGrpNavOp {
  transition: border-radius 0.3s ease-in-out;
  position: absolute;
  font-size: 1rem;
  color: var(--bgc-pri);
  top: calc(50% - 0.75rem);
  /*vertical middle*/
  border-radius: 50%;
  border: 1px solid var(--bgc-pri);
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.cntrlGrpNavOpLeft {
  left: 0px;
  transition: border-radius 0.3s ease-in-out;
  position: absolute;
  font-size: 1rem;
  color: var(--bgc-pri);
  top: calc(50% - 0.75rem);
  /*vertical middle*/
  border-radius: 50%;
  border: 1px solid var(--bgc-pri);
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.cntrlGrpNavOpRight {
  right: 0px;
  transition: border-radius 0.3s ease-in-out;
  position: absolute;
  font-size: 1rem;
  color: var(--bgc-pri);
  top: calc(50% - 0.75rem);
  /*vertical middle*/
  border-radius: 50%;
  border: 1px solid var(--bgc-pri);
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.cntrlGrpNavOpLeft:hover {
  transition: border-radius 0.3s ease-in-out;
  border-radius: 25%;
}
.cntrlGrpNavOpRight:hover {
  transition: border-radius 0.3s ease-in-out;
  border-radius: 25%;
}
.deletedRow {
  background-color: rgba(255, 0, 0, 0.6);
}
.alt:nth-child(odd) {
  background-color: rgba(8, 8, 8, 0.04);
}
.altChild > :nth-child(odd) {
  background-color: rgba(8, 8, 8, 0.04);
}
.altColour {
  background-color: rgba(8, 8, 8, 0.04);
}
.vLineAll > :first-child {
  border-top: 1px solid lightgrey;
}
.vLineAll > * {
  border-bottom: 1px solid lightgrey;
}
.vLine > :first-child {
  border-top: 2px solid transparent;
}
.vLine > * {
  border-top: 2px solid lightgrey;
}
.cntrlGrp {
  /*border-bottom: 1px solid var(--br-ter);*/
  position: relative;
}
/* .cntrlGrp:nth-of-type(1) {
  border-top: 1px solid var(--br-ter);
}*/
.cntrlGrp:nth-last-of-type(1) {
  /*border-bottom: 1px solid transparent;*/
  /*margin-bottom: 4px;*/
}
.cntrlGrpNoEnds:nth-of-type(1) {
  border-top: 1px solid transparent !important;
}
.cntrlGrpNoEnds:nth-last-of-type(1) {
  border-bottom: 1px solid transparent !important;
}
.title {
  font-size: 1.5rem;
  color: var(--bgc-pri);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}
.titleMed {
  font-size: 1.2rem;
  color: var(--bgc-pri);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}
.titleSmall {
  font-size: 1rem;
  color: var(--bgc-pri);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}
.title2 {
  font-size: 1.2rem;
  color: var(--bgc-pri);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
input.mandatory {
  background-image: url("../isl/star.svg");
  background-repeat: no-repeat;
  background-position-x: right;
}
div.mandatory::after {
  content: " *";
  color: red;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
.error {
  border: 2px solid red;
}
.borderPrimary {
  border-color: var(--bgc-pri) !important;
}
.borderRed {
  border-color: red;
}
.borderGray {
  border-color: #dddddd;
}
/*================================================ 
 skin 
================================================*/
.personaliseOp {
  width: 270px;
}
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
.skins {
  width: 80%;
  margin: 1rem auto;
}
.skins div {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  margin: 1rem 0 0;
}
.skins span {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 10px;
  padding: 3px;
  background: #FFF;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgb(0 0 0 / 15%);
}
.skins in {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 -5px 20px rgb(0 0 0 / 15%) inset, 0 5px 20px rgb(255 255 255 / 40%) inset;
  box-sizing: border-box;
  border-radius: 50%;
}
.fontSize {
  margin: 1rem auto;
  width: 80%;
}
.fontSize div {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  margin: 1rem 0 0;
}
.fontSize span {
  position: relative;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 7px;
  margin: 0.5rem 0.2rem;
}
.skins span.active:after,
.fontSize span.active:after {
  position: absolute;
  padding: 0 4px;
  top: -5px;
  left: -5px;
  content: "\2713";
  color: white;
  background-color: green;
  border-radius: 9px;
}
/*================================================ 
 Animations 
================================================*/
.swing {
  transition: all 0.2s ease-in-out;
}
.swing:focus {
  animation: swing 0.5s ease;
  animation-iteration-count: 1;
}
@keyframes swing {
  15% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(3px);
  }
  65% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}
.grow {
  transition: all 0.3s ease-in-out;
}
.grow:hover {
  transform: scale(1.1);
}
.shrink {
  transition: all 0.3s ease-in-out;
}
.shrink:hover {
  transform: scale(0.8);
}
.overlay {
  transition: transform ease-out 0.3s;
}
.invisible {
  visibility: hidden !important;
}
.hide-pointer {
  display: none;
}
.show-pointer {
  display: unset !important;
}
.visible {
  visibility: visible !important;
}
.collectinPointer {
  visibility: hidden;
}
.primaryFontColor {
  color: var(--br-pri);
}
.translateLeft000 {
  transform: translateX(0%);
  transition: transform 0.3s ease;
}
.translateLeft100 {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.translateLeft200 {
  transform: translateX(-200%);
  transition: transform 0.3s ease;
}
.translateLeft300 {
  transform: translateX(-300%);
  transition: transform 0.3s ease;
}
.translateLeft {
  transform: translateX(-100%);
}
.translateCenter {
  transform: translateX(0%);
}
.translateRight {
  transform: translateX(100%);
}
.translateUp {
  transform: translateY(-100%);
}
.translateMiddle {
  transform: translateY(0%);
}
.translateDown {
  transform: translateY(100);
}
.transShrink {
  transition: transform 0.5s ease;
  transform: scale(0);
  transform-origin: top;
}
/***********Footer message START**************/
.footerMsg {
  position: fixed;
  height: 0px;
  bottom: 0px;
  width: 69%;
  margin: 0 15%;
  float: none;
  text-align: center;
  border-radius: 3px;
  display: block;
  -webkit-transition: height 250ms, bottom 150ms;
  transition: height 250ms, bottom 150ms;
  background-color: var(--fc-pri);
  color: var(--bgc-pri);
  z-index: 1070;
}
.foterMsgShow {
  max-height: 400px;
  height: auto;
  overflow-y: scroll;
  bottom: 45px;
  border: 2px solid #999;
  padding: 8px;
}
.foterMsgBody {
  display: inline-block;
}
.foterMsg {
  padding: 5px 10px;
  display: block;
}
.foterMsgClose {
  padding: 3px;
  color: white;
  background-color: red;
  display: inline-block;
  cursor: pointer;
  top: 10px;
  position: absolute;
  right: 10px;
}
/***********Footer message END**************/
/***********Progress bar START**************/
.progressBar {
  height: 1.3rem;
  margin-top: 3px;
}
.progressVal {
  float: left;
  margin: 4px 2rem 0 0.5rem;
}
/***********Progress bar end**************/
/***********POPUP PANAL START**************/
.popupMask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 80;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
}
.popupPanel {
  position: relative;
  float: none;
  margin: 20px auto;
  background-color: white;
  overflow: hidden;
}
.popupBodyPanel {
  position: relative;
  height: calc(97%);
  overflow-x: hidden;
  overflow-y: auto;
}
.popupLarge {
  width: 75%;
  height: 75%;
  max-height: 75%;
}
.popupExtraLarge {
  width: 85%;
  height: 85%;
  max-height: 85%;
}
.popupDExtraLarge {
  width: 95%;
  height: 85%;
  max-height: 85%;
}
.popupMedium {
  width: 50%;
  height: 50%;
  max-height: 50%;
}
.popupSmall {
  width: 25%;
  height: 25%;
  max-height: 25%;
}
.popupTwoThird {
  width: 50%;
  height: 65%;
  max-height: 65%;
}
/***********POPUP PANAL END**************/
/***********MASK PANAL START**************/
.processMask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
}
.wProcessMask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.processMaskSpineCntnr {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30%;
  height: 30%;
  margin: 10% 34%;
  text-align: center;
}
.wProcessMaskSpineCntnr {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}
.wSpinner {
  font-size: 250%;
  width: 1em;
  height: 1em;
  position: relative;
  list-style: none;
  border-radius: 50%;
}
.wSpinner li {
  width: .2em;
  height: .2em;
  position: absolute;
  border-radius: 50%;
}
.wSpinner li:nth-child(1) {
  background: #00C176;
  top: 0;
  left: 50%;
  margin-left: -0.1em;
  transform-origin: 50% 250%;
  animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
  -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
.wSpinner li:nth-child(2) {
  background: #FF003C;
  top: 50%;
  right: 0;
  margin-top: -0.1em;
  transform-origin: -150% 50%;
  animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
  -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
.wSpinner li:nth-child(3) {
  background: #FABE28;
  bottom: 0;
  left: 50%;
  margin-left: -0.1em;
  transform-origin: 50% -150%;
  animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
  -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
.wSpinner li:nth-child(4) {
  background: #88C100;
  top: 50%;
  left: 0;
  margin-top: -0.1em;
  transform-origin: 250% 50%;
  animation: rota 1.72s linear infinite;
  -webkit-animation: rota 1.72s linear infinite;
}
.spinner {
  font-size: 100px;
  width: 1em;
  height: 1em;
  margin: 20px auto;
  position: relative;
  list-style: none;
  border-radius: 50%;
}
.spinner li {
  width: .2em;
  height: .2em;
  position: absolute;
  border-radius: 50%;
}
.spinner li:nth-child(1) {
  background: #00C176;
  top: 0;
  left: 50%;
  margin-left: -0.1em;
  transform-origin: 50% 250%;
  animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
  -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
.spinner li:nth-child(2) {
  background: #FF003C;
  top: 50%;
  right: 0;
  margin-top: -0.1em;
  transform-origin: -150% 50%;
  animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
  -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
.spinner li:nth-child(3) {
  background: #FABE28;
  bottom: 0;
  left: 50%;
  margin-left: -0.1em;
  transform-origin: 50% -150%;
  animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
  -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
.spinner li:nth-child(4) {
  background: #88C100;
  top: 50%;
  left: 0;
  margin-top: -0.1em;
  transform-origin: 250% 50%;
  animation: rota 1.72s linear infinite;
  -webkit-animation: rota 1.72s linear infinite;
}
@-webkit-keyframes rota {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rota {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/***********MASK PANAL END****************/
/***********ALERT PANAL START************/
.cnfrmMask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
}
.cnfrm {
  position: relative;
  height: 0px;
  top: 0px;
  padding: 8px;
  /*max-width     : 40%;*/
  margin: 0 29%;
  float: none;
  border: 2px solid #999;
  border-radius: 3px;
  display: block;
  background-color: white;
  transition: height 250ms, top 150ms;
}
.cnfrmClip {
  display: inline-block;
  padding: 20px;
}
.cnfrmShow {
  height: auto;
  max-height: 100px;
  max-height: 60%;
  top: 45px;
}
.cnfrmTitle {
  padding: 5px;
  font-size: calc(1rem * 1.5) !important;
  color: #999;
}
.cnfrmBody {
  padding: 2px;
  font-size: 1rem !important;
  margin: 5px;
}
.cnfrmBtnPanel {
  padding: 15px;
}
.cnfrmButton {
  margin-left: 10px;
  float: right !important;
  transition: box-shadow 100ms;
}
.cnfrmButton:focus {
  box-shadow: 0 0 20px #005eff;
}
.padLarge {
  padding: 10px !important;
}
.hCenter {
  text-align: center !important;
}
.op5 {
  opacity: 0.5;
}
/***********ALERT PANAL END**************/
/***********Notes & Attachment start ************/
.notesMask,
.atchmtMask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1060;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
}
.notesPanel,
.atchmtPanel {
  position: relative;
  width: 75%;
  height: 75%;
  max-height: 75%;
  float: none;
  margin: 20px auto;
  background-color: white;
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
}
.atchmtBody {
  height: 70%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.dndArea {
  border: 3px dashed #b7bccf;
}
.watermark {
  z-index: 1;
  position: absolute;
  color: #e7e7e7;
  font-size: 40px;
  pointer-events: none;
}
.atchmtFooter {
  height: 15%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.fileControl {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.atchmtMsg,
.atchmtSize,
.atchmtText {
  padding: 0.20rem;
  display: inline-block;
  border: 2px solid transparent;
  font-size: 12px !important;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.atchmtBtnRight {
  margin-left: auto;
  margin-right: 5px;
}
@media screen and (min-width: 1000px) {
  .notesPanel {
    width: 55%;
  }
}
.notesMsgs {
  max-height: 85%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 0px;
  border: 1px solid #fff;
  border-left: none;
  border-right: none;
}
.notesInputCntnr {
  margin: auto auto 10px;
  width: 95%;
}
.notesMsg {
  min-width: 55%;
  max-width: 80%;
  margin: 5px 15px;
  border: 1px solid var(--bgc-pri);
  border-radius: 3px;
  padding: 3px;
  overflow: hidden;
  background-color: rgba(92, 191, 249, 0.1);
  box-shadow: 3px 5px 5px #D3D3D3;
}
.myNotes {
  float: right;
}
.othersNotes {
  float: left;
}
.othersNotes:before {
  content: '';
  position: absolute;
  left: 3px;
  border: 6px solid;
  border-color: var(--bgc-pri) var(--bgc-pri) transparent transparent;
}
.myNotes:before {
  content: '';
  position: absolute;
  right: 3px;
  border: 6px solid;
  border-color: var(--bgc-pri) transparent transparent var(--bgc-pri);
}
.notesMsgHead {
  color: var(--bgc-pri);
  display: flex;
  flex-flow: row nowrap;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notesMsgBody {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.notesDel {
  color: #8a3535;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  margin-left: auto;
}
.notesDel > i {
  transition: all 0.2s ease-out;
}
.notesDel > i:hover {
  transform: scale(1.2);
  color: #ff0000;
  cursor: pointer;
}
.notesInput {
  width: calc(100% - 60px);
  margin: auto;
  display: inline-block;
  border: solid 1px #000;
  border-radius: 5px;
  line-height: 1.8rem;
  padding: 0.5rem !important;
}
.notesInputPost {
  padding: 0.6rem !important;
  border-radius: 20px;
  margin-bottom: 0px;
  margin-top: auto;
  margin-left: 10px;
}
@media screen and (max-width: 649px) {
  .notesPanel,
  .atchmtPanel {
    width: 90%;
    height: 90%;
    max-height: 90%;
    margin: 0 auto;
  }
}
.fadeOut {
  animation-name: fadeOutAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.delMsgNotes {
  animation-name: delEleAnimation;
  animation-duration: 0.5s;
  animation-timing-function: linear;
}
@keyframes delEleAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
    height: 0px;
  }
}
.link {
  color: blue;
  cursor: pointer;
}
.linkButn:hover {
  transform: scale(1.05);
}
.linkButn:active {
  transform: scale(1);
}
.pointer {
  cursor: pointer;
}
.grab {
  cursor: grab;
}
.grab:active {
  cursor: grabbing;
}
.drag-enabled {
  cursor: pointer;
}
.resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background-color: var(--bgc-pri) !important;
}
/* subtle visual corner indicator */
.resize::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.wait {
  cursor: wait !important;
}
.atchmtSize {
  text-align: right;
}
.atchmtPrg {
  padding: calc(0.16rem);
  height: calc(1.32rem + 4px) !important;
  line-height: 1rem;
  border: 2px solid transparent;
}
.atchmtPrg::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.notesIcon,
.atchmtIcon {
  font-size: 1rem;
}
.liteFont {
  font-family: Segoe UI;
  color: #b7bccf;
  font-size: 1rem;
  animation: hintAnmtn 2s linear infinite alternate;
}
.liteFont:hover {
  color: red;
}
@keyframes hintAnmtn {
  0% {
    color: #b7bccf;
  }
  50% {
    color: black;
  }
  100% {
    color: red;
  }
}
.notesHint {
  position: relative;
  top: 15px;
  font-size: 1rem;
}
.notesBtn,
.atchmtBtn {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  transition: all 0.2s ease-out;
}
.notesBtn:hover,
.atchmtBtn:hover {
  width: 120px;
  font-size: 1.3rem;
}
.notesBtn:active,
.atchmtBtn:active {
  font-size: 1.1rem;
}
.atchmt-items {
  margin: 5px;
  padding: 5px;
  list-style-type: none;
}
.gridInfo {
  width: 100%;
  background-color: #ffffe6;
  border-radius: 3px;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gridInfo > span {
  color: #cc9900;
  font-weight: 600;
}
.maskUi {
  position: absolute;
  opacity: 0;
}
.focus {
  border: 2px solid transparent;
}
.focus:focus-within {
  border: 2px solid var(--bgc-pri);
}
/***********Notes & Attachment end ************/
.removeElement {
  max-height: 50px;
  animation-name: removeElement;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
@keyframes removeElement {
  0% {
    max-height: 50px;
  }
  100% {
    max-height: 0px;
    color: white;
  }
}
.addElement {
  max-height: 0px;
  animation-name: addElement;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
@keyframes addElement {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 50px;
  }
}
/*tapti-*/
.switch-holder {
  display: flex;
  padding: 10px 10px;
  align-items: center;
}
.switch-label {
  font-weight: bold;
  padding-right: 0.5rem !important;
}
.switch-toggle {
  height: 20px;
}
.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}
.switch-toggle input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
  border-radius: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, 0.6), inset 10px 10px 10px rgba(0, 0, 0, 0.25);
}
.switch-toggle input[type="checkbox"] + label::before {
  position: absolute;
  content: 'OFF';
  font-size: 10px;
  text-align: center;
  line-height: 15px;
  top: 2px;
  left: 4px;
  width: 28px;
  height: 15px;
  border-radius: 20px;
  background-color: #d1dad3;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.5), 3px 3px 5px rgba(0, 0, 0, 0.25);
  transition: 0.5s ease-in-out;
}
.switch-toggle input[type="checkbox"]:checked + label::before {
  left: 48%;
  content: 'ON';
  color: #fff;
  background-color: var(--bgc-pri);
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.5), 3px 3px 5px var(--bgc-pri);
  transition: 0.5s ease-in-out;
}
.cb:focus {
  border: 2px solid #ccc;
  border-radius: 4px;
}
.cbInput {
  position: absolute;
  opacity: 0;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
.fieldset {
  border: 1px solid #dddddd;
  border-radius: 5px;
}
.legend {
  display: flex;
  flex-flow: row nowrap;
  background-color: transparent !important;
  margin-bottom: 0 !important;
  margin-left: 0.5rem !important;
  border-radius: 4px;
}
.legendLight {
  background-color: #fff !important;
  color: var(--bgc-pri) !important;
  font-size: 1.25rem;
  border-radius: 4px;
  border: 1px solid #dddddd;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.rot45 {
  transform: rotate(45deg);
}
.rot90 {
  transform: rotate(90deg);
}
.rot135 {
  transform: rotate(135deg);
}
.rot180 {
  transform: rotate(180deg);
}
.rot225 {
  transform: rotate(225deg);
}
.rot270 {
  transform: rotate(270deg);
}
.rot315 {
  transform: rotate(315deg);
}
.rot360 {
  transform: rotate(360deg);
}
/* ---------------- Happy birthday start ---------------- */
.mouseOverGlow:hover {
  text-shadow: 0px 0px 20px white;
}
.cursorPointer:hover {
  cursor: pointer;
}
.rotatemenu {
  transform: rotateZ(90deg);
}
.transitionMenuEffect {
  transition: all .5s ease;
}
.transitionRotateMenuEffect {
  transition: all 0.5s ease;
}
.zindex {
  z-index: 999;
}
.resizable {
  position: relative;
  width: 600px;
  /* Set an initial width */
  height: 300px;
  /* Set an initial height */
  border: 1px solid #ccc;
  /* Add a border for visual clarity */
}
.drag-handle {
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  /* Set cursor style to indicate resize direction */
}
#search-popup {
  display: none;
  margin-top: 5px;
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 50%;
  overflow-y: auto;
  width: calc(90%);
}
#search-popup:hover,
#_fxnSearch:focus + #search-popup {
  display: block;
}
.popup ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu {
  background-color: var(--bgc-pri) !important;
  color: #fff;
  padding: 10px;
  width: 100%;
}
.opacity0 {
  opacity: 0;
}
.nested {
  display: none;
}
.active {
  display: block;
}
.search-container {
  border: 1px solid var(--bgc-pri);
  border-radius: 5px;
  padding: 0.25rem !important;
}
.search-close {
  margin: auto !important;
  color: #dc3545 !important;
  left: -12px;
  position: relative;
  z-index: 5;
}
.tree {
  list-style-type: none;
}
.treeEntryUl {
  list-style-type: none;
  padding-left: 1.2rem;
}
.treeItem {
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
  align-items: center;
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  content: "\25BC" !important;
}
.caret-current {
  background: rgba(180, 182, 184, 0.2);
}
.caret-current::before {
  color: white;
  line-height: 2;
  background-color: var(--bgc-pri);
}
/* Hide the nested list */
.nested {
  display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}
.pagination {
  display: inline-block;
}
.pagination a {
  /*font-size: 16px;*/
  float: left;
  padding: 2px 10px 0px 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination div {
  float: left;
  margin: 4px;
  padding: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination input {
  float: left;
  margin: 4px;
  padding: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination span {
  float: left;
  padding: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination a.active {
  border: 2px solid var(--bgc-pri);
  border-radius: 3px;
}
.pagination a:hover:not(.active) {
  background-color: #ddd;
}
.notification-badge {
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 3px 7px;
  font-size: 10px;
  position: relative;
  top: -2px;
  left: -5px;
}
.background-color-unset {
  background-color: unset;
}
/* ---------------- Happy birthday end ---------------- */
.clipNone:after {
  content: 'NONE';
}
.clipAsc:after {
  content: 'ASC ↓';
}
.clipDesc:after {
  content: 'DESC ↑';
}
.floatRight {
  float: right !important;
}
.image-upload-container {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 90%;
  right: 0 !important;
  left: auto !important;
  position: absolute;
  top: 10%;
  left: 0;
  z-index: 1000;
  margin: .125rem 0 0;
  font-size: .85rem;
  color: #858796;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e3e6f0;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  overflow-y: scroll !important;
}
.image-upload-container h2 {
  margin-bottom: 20px;
  color: #333;
}
.upload-section {
  position: relative;
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.upload-section:hover,
.upload-section.dragover {
  border-color: #007bff;
  background-color: #f0f8ff;
}
.upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#previewImage {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #ddd;
}
.upload-text {
  color: #666;
  font-size: 14px;
}
.notification-counttwodigit {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #ff0000;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.notification-counttwodigit:empty {
  display: none;
}
.notification-countonedigit {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #ff0000;
  color: #fff;
  z-index: 9999;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.notification-countonedigit:empty {
  display: none;
}
.w10px {
  width: 10px;
}
.w20px {
  width: 20px;
}
.w30px {
  width: 30px;
}
.w40px {
  width: 40px;
}
.w50px {
  width: 50px;
}
.w60px {
  width: 60px;
}
.w70px {
  width: 70px;
}
.w80px {
  width: 80px;
}
.w90px {
  width: 90px;
}
.w100px {
  width: 100px;
}
.w110px {
  width: 110px;
}
.w120px {
  width: 120px;
}
.w130px {
  width: 130px;
}
.w140px {
  width: 140px;
}
.w150px {
  width: 150px;
}
.w160px {
  width: 160px;
}
.w170px {
  width: 170px;
}
.w180px {
  width: 180px;
}
.w190px {
  width: 190px;
}
.w200px {
  width: 200px;
}
.w210px {
  width: 210px;
}
.w220px {
  width: 220px;
}
.w230px {
  width: 230px;
}
.w240px {
  width: 240px;
}
.w250px {
  width: 250px;
}
.h10px {
  height: 10px;
}
.h20px {
  height: 20px;
}
.h30px {
  height: 30px;
}
.h40px {
  height: 40px;
}
.h50px {
  height: 50px;
}
.h60px {
  height: 60px;
}
.h70px {
  height: 70px;
}
.h80px {
  height: 80px;
}
.h90px {
  height: 90px;
}
.h100px {
  height: 100px;
}
.h110px {
  height: 110px;
}
.h120px {
  height: 120px;
}
.h130px {
  height: 130px;
}
.h140px {
  height: 140px;
}
.h150px {
  height: 150px;
}
.h160px {
  height: 160px;
}
.h170px {
  height: 170px;
}
.h180px {
  height: 180px;
}
.h190px {
  height: 190px;
}
.h200px {
  height: 200px;
}
.h210px {
  height: 210px;
}
.h220px {
  height: 220px;
}
.h230px {
  height: 230px;
}
.h240px {
  height: 240px;
}
.h250px {
  height: 250px;
}
.h1line {
  height: 1.2rem;
}
.h2line {
  height: calc(2.4rem);
}
.h3line {
  height: calc(3.6rem);
}
.h4line {
  height: calc(4.8rem);
}
.h5line {
  height: calc(6rem);
}
.h1lineDotted {
  height: 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.h2lineDotted {
  height: calc(2.4rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.h3lineDotted {
  height: calc(3.6rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.h4lineDotted {
  height: calc(4.8rem);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.h5lineDotted {
  height: calc(6rem);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 650px) and (max-width: 999px) {
  .mH1line {
    height: 1.2rem;
  }
  .mH2line {
    height: calc(2.4rem);
  }
  .mH3line {
    height: calc(3.6rem);
  }
  .mH4line {
    height: calc(4.8rem);
  }
  .mH5line {
    height: calc(6rem);
  }
  .mH1lineDotted {
    height: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .mH2lineDotted {
    height: calc(2.4rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .mH3lineDotted {
    height: calc(3.6rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .mH4lineDotted {
    height: calc(4.8rem);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .mH5lineDotted {
    height: calc(6rem);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
}
@media screen and (max-width: 649px) {
  .sH1line {
    height: 1.2rem;
  }
  .sH2line {
    height: calc(2.4rem);
  }
  .sH3line {
    height: calc(3.6rem);
  }
  .sH4line {
    height: calc(4.8rem);
  }
  .sH5line {
    height: calc(6rem);
  }
  .sH1lineDotted {
    height: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .sH2lineDotted {
    height: calc(2.4rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .sH3lineDotted {
    height: calc(3.6rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .sH4lineDotted {
    height: calc(4.8rem);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .sH5lineDotted {
    height: calc(6rem);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
}
.state-layer {
  padding: calc(0.15rem) calc(0.45rem) calc(0.15rem) calc(0.45rem);
  background-color: #888888;
  border: 1px solid #888888;
  color: white;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  margin-left: auto !important;
}
.indicator {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 10px;
  /* slim tab thickness */
  height: 50px;
  display: inline-grid;
  place-items: center;
  background-color: var(--bgc-pri) !important;
  /* dark background */
  color: #ffffff;
  border: 2px solid transparent;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  cursor: pointer;
  z-index: 999999;
  transition: width .15s ease, opacity .2s ease;
}
.indicator:hover {
  width: 20px;
}
.indicator:active {
  transform: translateY(-50%) scale(0.98);
}
.indicator:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.frame-tab > :first-child {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--br-pri);
}
.frame-tab > :not(:first-child) {
  color: var(--bgc-pri);
  background-color: #fff;
  border-color: var(--bgc-pri);
}
.frame-tab > :not(:first-child):hover {
  color: var(--fc-pri);
  background-color: var(--bgc-pri);
  border-color: var(--bgc-pri);
}
.status-box.warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.dscPanel {
  position: relative;
  width: 75%;
  height: 100%;
  max-height: 100%;
  float: none;
  background-color: white;
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
}
.ql-size-increase::before {
  content: "A+";
  font-size: 14px;
  font-weight: bold;
}
.ql-size-decrease::before {
  content: "A-";
  font-size: 14px;
  font-weight: bold;
}
.ql-font-sans-serif {
  font-family: sans-serif;
}
.ql-font-serif {
  font-family: serif;
}
.ql-font-monospace {
  font-family: monospace;
}
.ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font-calibri {
  font-family: Calibri, sans-serif;
}
.ql-font-book-antiqua {
  font-family: "Book Antiqua", "Palatino Linotype", "Palatino", serif;
}
.ql-font-garamond {
  font-family: Garamond, serif;
}
.ql-font-georgia {
  font-family: Georgia, serif;
}
.ql-font-times-new-roman {
  font-family: "Times New Roman", serif;
}
.ql-font-trebuchet {
  font-family: "Trebuchet MS", sans-serif;
}
.ql-font-verdana {
  font-family: Verdana, sans-serif;
}
.ql-font-comic-sans {
  font-family: "Comic Sans MS", cursive;
}
.ql-font-roboto {
  font-family: 'Roboto', sans-serif;
}
.ql-font-poppins {
  font-family: 'Poppins', sans-serif;
}
.ql-picker-label[data-value="sans-serif"]::before,
.ql-picker-item[data-value="sans-serif"]::before,
.ql-selected[data-value="sans-serif"]::before {
  content: 'sans-serif' !important;
}
.ql-picker-label[data-value="serif"]::before,
.ql-picker-item[data-value="serif"]::before,
.ql-selected[data-value="serif"]::before {
  content: 'serif' !important;
}
.ql-picker-label[data-value="monospace"]::before,
.ql-picker-item[data-value="monospace"]::before,
.ql-selected[data-value="monospace"]::before {
  content: 'monospace' !important;
}
.ql-picker-label[data-value="arial"]::before,
.ql-picker-item[data-value="arial"]::before,
.ql-selected[data-value="arial"]::before {
  content: 'arial' !important;
}
.ql-picker-label[data-value="calibri"]::before,
.ql-picker-item[data-value="calibri"]::before,
.ql-selected[data-value="calibri"]::before {
  content: 'calibri' !important;
}
.ql-picker-label[data-value="book-antiqua"]::before,
.ql-picker-item[data-value="book-antiqua"]::before,
.ql-selected[data-value="book-antiqua"]::before {
  content: 'Book Antiqua' !important;
}
.ql-picker-label[data-value="garamond"]::before,
.ql-picker-item[data-value="garamond"]::before,
.ql-selected[data-value="garamond"]::before {
  content: 'garamond' !important;
}
.ql-picker-label[data-value="times-new-roman"]::before,
.ql-picker-item[data-value="times-new-roman"]::before,
.ql-selected[data-value="times-new-roman"]::before {
  content: 'times-new-roman' !important;
}
.ql-picker-label[data-value="trebuchet"]::before,
.ql-picker-item[data-value="trebuchet"]::before,
.ql-selected[data-value="trebuchet"]::before {
  content: 'trebuchet' !important;
}
.ql-picker-label[data-value="verdana"]::before,
.ql-picker-item[data-value="verdana"]::before,
.ql-selected[data-value="verdana"]::before {
  content: 'verdana' !important;
}
.ql-picker-label[data-value="comic-sans"]::before,
.ql-picker-item[data-value="comic-sans"]::before,
.ql-selected[data-value="comic-sans"]::before {
  content: 'comic-sans' !important;
}
.ql-picker-label[data-value="roboto"]::before,
.ql-picker-item[data-value="roboto"]::before,
.ql-selected[data-value="roboto"]::before {
  content: 'roboto' !important;
}
.ql-picker-label[data-value="poppins"]::before,
.ql-picker-item[data-value="poppins"]::before,
.ql-selected[data-value="poppins"]::before {
  content: 'poppins' !important;
}