.header-flex-container {
  display: flex;
  flex-direction: row;
  min-height: 3.25em;
  height: 52px;
  background-color: #ffffff;
  box-shadow: 1px 10px 10px -10px #ffffff87;
  top: 0;
  position: sticky;
  z-index: 3;
  box-sizing: border-box;
}
.header-flex-container div.logo-titile .header-logo .header-logo-img {
  width: 70px;
  height: 50px;
}
.header-flex-container div.system-name {
  font-size: 12pt;
  font-weight: bold;
  margin: auto auto auto 10px;
}
.header-flex-container div.docDate {
  line-height: 50px;
  text-align: center;
  position: relative;
  /* display: flex; */
  padding: 0 5px;
  font-size: 1em;
  margin-right: 1rem;
}
.header-flex-container div.user-profile {
  line-height: 50px;
  text-align: center;
  position: relative;
  padding: 0 5px;
  font-size: 1em;
  margin-right: 1rem;
}
.header-flex-container div.user-profile:hover {
  background-color: #f86565;
  color: #fff;
}
.header-flex-container div.user-profile .toolbar-menu {
  padding-top: 0px;
  position: relative;
  cursor: pointer;
}
.header-flex-container div.user-profile .sub-toolbar-menus {
  right: 0;
  width: 192px;
  position: absolute;
  background-color: #fff;
  z-index: 3 !important;
  box-shadow: 0px 0px 5px -3px #383838;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul li {
  text-align: left;
  line-height: 3em;
  cursor: pointer;
  padding: 0.35em;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul li:hover {
  background-color: #f86565;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul li:hover span.icon,
.header-flex-container div.user-profile .sub-toolbar-menus ul li:hover span.text {
  color: #fff;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul li span.icon {
  margin: 0em 0.5em;
  color: black;
}
.header-flex-container div.user-profile .sub-toolbar-menus ul li span.text {
  /*
            font-family: @font-family;
            font-size: @font-size*1.0em;
            line-height: @font-size*2.6em;
            */
  color: black;
}
.header-flex-container div.user-profile .sub-toolbar-menus:hover,
.header-flex-container div.user-profile .toolbar-menu:hover + .sub-toolbar-menus {
  visibility: visible;
  opacity: 1;
}

/*! react-sidenav v0.4.5 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-sidenav */
.sidenav---sidenav---_2tBP {
  z-index: 3;
  position: relative;
  width: 42px;
  background: #db3d44;
  -webkit-transition: min-width 0.15s;
  -moz-transition: min-width 0.15s;
  -o-transition: min-width 0.15s;
  -ms-transition: min-width 0.15s;
  transition: min-width 0.15s;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ- .sidenav---sidenav-subnav---1EN61 {
  display: none;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---sidenav-subnav---1EN61 {
  display: block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL {
  min-width: 240px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
  display: inline-block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expandable---3_dr7 > .sidenav---navitem---9uL5T {
  cursor: pointer;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
  position: static;
  border: none;
  float: left;
  clear: both;
  width: 100%;
  background: transparent;
  overflow: hidden;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
  display: block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
  display: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 {
  position: relative;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
  content: " ";
  width: 100%;
  height: 28px;
  position: absolute;
  top: 0;
  z-index: -1;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:first-child {
  display: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover::before {
  background: #fff;
  opacity: 0.15;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  filter: alpha(opacity=15);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
  content: " ";
  width: 100%;
  height: 28px;
  position: absolute;
  top: 0;
  z-index: -1;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T {
  color: #fff;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T::before {
  content: " ";
  width: 2px;
  height: 20px;
  left: 10px;
  top: 4px;
  position: absolute;
  border-left: 2px #fff solid;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover > .sidenav---navitem---9uL5T {
  background: transparent;
  color: #fff;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T {
  color: #f9dcdd;
  padding: 0 14px 0 20px;
  line-height: 28px;
}
.sidenav---sidenav-toggle---1KRjR {
  position: relative;
  float: left;
  width: 42px;
  height: 52px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.sidenav---sidenav-toggle---1KRjR:focus {
  outline: none;
}
.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 1px;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -ms-transition: all 0.15s;
  transition: all 0.15s;
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
}
.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 + .sidenav---icon-bar---u1f02 {
  margin-top: 4px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
  width: 25px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(2) {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(3) {
  margin-top: -8px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.sidenav---sidenav-nav---3tvij {
  float: left;
  padding: 0;
  margin: 0;
  clear: both;
  list-style: none;
  width: 100%;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- {
  clear: both;
  position: relative;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T {
  cursor: default;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T::after {
  background: #fff;
  opacity: 0.15;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  filter: alpha(opacity=15);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after {
  background: #000;
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
  background: #000;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
  background: #000;
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f {
  color: #fff;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > * {
  color: #fff;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T {
  position: relative;
  display: block;
  line-height: 50px;
  height: 50px;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T:focus {
  outline: 0;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T::after {
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  z-index: -1;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > a {
  color: #f9dcdd;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > a > * {
  color: #f9dcdd;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
  display: block;
  float: left;
  width: 42px;
  height: 50px;
  margin-right: -6px;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  line-height: 50px;
  text-align: center;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
  display: none;
}
.sidenav---sidenav-subnav---1EN61 {
  min-width: 200px;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 0;
  left: 42px;
  background: #fff;
  border: 1px #bbb solid;
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:first-child {
  margin: 0 12px;
  line-height: 48px;
  border-bottom: 1px #ccc solid;
  font-size: 14px;
  font-weight: bolder;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:nth-child(2) {
  margin-top: 8px;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:last-child {
  margin-bottom: 8px;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T {
  color: #db3d44;
  font-weight: bold;
  background: none;
  cursor: default;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T:hover {
  background: #fff;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T {
  display: block;
  text-decoration: none;
  color: #222;
  font-size: 13px;
  line-height: 30px;
  padding: 0 14px;
  cursor: pointer;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T:hover {
  background: #eee;
}
.sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T:focus {
  outline: 0;
}
.sidenav---sidenav---_2tBP {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 20px;
}
.sidenav---sidenav---_2tBP *,
.sidenav---sidenav---_2tBP *:before,
.sidenav---sidenav---_2tBP *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* custom */
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > a {
  color: #f9dcdd;
  text-decoration: none;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > a {
  color: #db3d44;
  text-decoration: none;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > a {
  color: #222;
  text-decoration: none;
}

.body-right {
  background-color: #e4e2e2;
  margin-bottom: 6em;
}

.footer-bg {
  min-height: 3em;
  text-align: center;
  background-color: #313131;
}
.footer-text {
  padding: 1em;
  font-family: Tahoma;
  color: #d1d1d1;
}

.progress-indicator {
  display: flex;
  margin: 0 0 1em;
  padding: 0;
  font-size: 80%;
  text-transform: none;
  cursor: default;
}
.progress-indicator > li {
  flex: 1;
  list-style: none;
  text-align: center;
  width: auto;
  padding: 0;
  margin: 0;
  position: relative;
  text-overflow: ellipsis;
  color: #bbb;
  display: block;
}
.progress-indicator > li .bubble {
  border-radius: 1000px;
  width: 20px;
  height: 20px;
  background-color: #bbb;
  display: block;
  margin: 0 auto 0.5em;
  border-bottom: 1px solid #888;
}
.progress-indicator > li .bubble:before {
  display: block;
  position: absolute;
  top: 9px;
  width: 100%;
  height: 3px;
  content: '';
  background-color: #bbb;
  left: 0;
  margin-left: 54.5%;
}
.progress-indicator > li:last-child .bubble:before {
  width: 50%;
  margin-right: 50%;
  display: none;
}
.progress-indicator > li a:hover .bubble {
  background-color: #5671d0;
  border-color: #1f306e;
  color: #5671d0;
}
.progress-indicator > li a:hover .bubble:before {
  background-color: #5671d0;
  border-color: #1f306e;
}
.progress-indicator > li.completed {
  color: #65d074;
}
.progress-indicator > li.completed .bubble {
  color: #65d074;
  background-color: #65d074;
  border-color: #247830;
}
.progress-indicator > li.completed .bubble:before {
  background-color: #65d074;
  border-color: #247830;
}
.progress-indicator > li.active {
  color: #337AB7;
}
.progress-indicator > li.active .bubble {
  color: #337AB7;
  background-color: #337AB7;
  border-color: #122a3f;
}
@media handheld {
  .progress-indicator {
    font-size: 60%;
  }
}
@media screen and (max-width: 400px) {
  .progress-indicator {
    font-size: 60%;
  }
}

.toolbar-sticky {
  top: 4.25em !important;
  position: sticky!important;
  z-index: 2!important;
}
.hidden {
  display: none !important;
}
.button-menu button {
  margin: auto 1px;
}

.layout-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}
.layout-wrapper .content-app {
  width: 100%;
  overflow: auto;
  position: relative;
  background-color: #e4e2e2;
}
.layout-wrapper .content-app .body-layout {
  width: 100%;
  min-height: 50%;
}
.layout-wrapper .content-app .body-layout .body-break {
  width: 100%;
  padding: 0.5em;
  overflow-x: scroll;
}
.layout-wrapper .content-app .footer-layout {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
}
.layout-wrapper .bg-highlight {
  background-color: rgba(255, 255, 255, 0.2);
}
.layout-wrapper .sidesub-hover-bottom {
  top: unset;
  bottom: 0;
  left: 42px;
}
.layout-loader {
  z-index: 7;
  height: 100%;
  display: none;
  position: absolute;
  width: calc(100vw - 17px);
  background-color: rgba(0, 0, 0, 0.4);
}
.layout-loader .loader {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 16px solid #f3f3f3;
  transform: translate(-45%, -45%);
  border-top: 16px solid #3498db;
  -webkit-animation: spin 1s linear infinite;
  /* Safari */
  z-index: 8;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.card-border {
  margin: 0.1rem 1rem;
}
.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 0.5em;
  position: absolute;
}
.card .title {
  margin-bottom: 0.5em;
}
.card .title:after {
  content: " :";
}
.card-0 {
  position: relative;
  box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
}
.card-1 {
  position: relative;
  box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-1:hover {
  position: relative;
  box-shadow: 0 14px 28px #00000040, 0 10px 10px #00000038;
}
.card-2 {
  position: relative;
  box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003b;
}
.card-3 {
  position: relative;
  box-shadow: 0 10px 20px #00000030, 0 6px 6px #0000003b;
}
.card-4 {
  position: relative;
  box-shadow: 0 14px 28px #00000040, 0 10px 10px #00000038;
}
.card-5 {
  position: relative;
  box-shadow: 0 19px 38px #0000004d, 0 15px 12px #00000038;
}

ul.nav-bar {
  font-family: Tahoma;
  font-size: 11.4pt;
  line-height: 26.6pt;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
ul.nav-bar li.nav-bar-li {
  border-bottom: 1px solid #ff6358;
}
ul.nav-bar li.nav-bar-li span.k-icon {
  padding: 0.3em;
  display: inline;
}
ul.nav-bar li.nav-bar-li ul.nest-sub li.nav-bar-li-sub {
  padding-left: 1.4em;
}
ul.nav-bar li.nav-bar-li ul.nest-sub li.nav-bar-li-sub:hover,
ul.nav-bar li.nav-bar-li ul.nest-sub li.nav-bar-li-sub.active {
  background-color: #ff6358;
  color: #ffffff;
}
ul.nav-bar li.nav-bar-li ul.nest-sub li.nav-bar-li-sub a {
  color: #000000;
  text-decoration: none;
}
.nest-sub {
  padding-left: 1.5em;
}

.react-date-picker {
  display: inline-flex;
  position: relative;
}
.react-date-picker,
.react-date-picker *,
.react-date-picker *:before,
.react-date-picker *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.react-date-picker--disabled {
  background-color: #f0f0f0;
  color: #6d6d6d;
}
.react-date-picker__wrapper {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  border: thin solid gray;
}
.react-date-picker__inputGroup {
  min-width: calc((4px * 3) +  0.54em * 8  +  0.217em * 2);
  flex-grow: 1;
  padding: 0 2px;
  box-sizing: content-box;
}
.react-date-picker__inputGroup__divider {
  padding: 1px 0;
  white-space: pre;
}
.react-date-picker__inputGroup__input {
  min-width: 0.54em;
  height: 100%;
  position: relative;
  padding: 0 1px;
  border: 0;
  background: none;
  font: inherit;
  box-sizing: content-box;
  -moz-appearance: textfield;
}
.react-date-picker__inputGroup__input::-webkit-outer-spin-button,
.react-date-picker__inputGroup__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-date-picker__inputGroup__input:invalid {
  background: rgba(255, 0, 0, 0.1);
}
.react-date-picker__inputGroup__input--hasLeadingZero {
  margin-left: -0.54em;
  padding-left: calc(1px +  0.54em);
  background: none !important;
}
.react-date-picker__button {
  border: 0;
  background: transparent;
  padding: 4px 6px;
}
.react-date-picker__button:enabled {
  cursor: pointer;
}
.react-date-picker__button:enabled:hover .react-date-picker__button__icon,
.react-date-picker__button:enabled:focus .react-date-picker__button__icon {
  stroke: #0078d7;
}
.react-date-picker__button:disabled .react-date-picker__button__icon {
  stroke: #6d6d6d;
}
.react-date-picker__button svg {
  display: inherit;
}
.react-date-picker__calendar {
  width: 300px;
  max-width: 100vw;
  position: absolute;
  top: 100% !important;
  right: 0 !important;
  z-index: 2;
}
.react-date-picker__calendar--closed {
  display: none;
}
.react-date-picker__calendar .react-calendar {
  border-width: thin;
}

.react-calendar {
  width: 300px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
  position: absolute;
}
.react-calendar--doubleView {
  width: 700px;
}
.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -0.5em;
}
.react-calendar--doubleView .react-calendar__viewContainer > * {
  width: 50%;
  margin: 0.5em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}
.react-calendar button:enabled:hover {
  cursor: pointer;
}
.react-calendar__navigation {
  height: 44px;
  margin-bottom: 1em;
}
.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__navigation button[disabled] {
  background-color: #f0f0f0;
}
.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}
.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}
.react-calendar__month-view__weekNumbers {
  font-weight: bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}
.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}
.react-calendar__month-view__days__day--neighboringMonth {
  color: #757575;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}
.react-calendar__tile {
  max-width: 100%;
  text-align: center;
  padding: 0.75em 0.5em;
  background: none;
}
.react-calendar__tile:disabled {
  background-color: #f0f0f0;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}
.react-calendar__tile--now {
  background: #ffff76;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
  background: #ffffa9;
}
.react-calendar__tile--hasActive {
  background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}
.react-calendar__tile--active {
  background: #006edc;
  color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.customYes,
.customSwalNo,
.customSwalCancel {
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  margin: 30px 5px 0px 5px;
  padding: 10px 32px;
}
.customYes {
  background-color: #3085d6;
  border-left-color: #3085d6;
  border-right-color: #3085d6;
}
.customSwalNo {
  background-color: #d6822f;
  border-left-color: #d6822f;
  border-right-color: #d6822f;
}
.customSwalCancel {
  background-color: #a7a7a7;
  border-left-color: #a7a7a7;
  border-right-color: #a7a7a7;
}

/* .k-animation-container {
  z-index: 13 !important;
} */

.nav-left {
  z-index: 1;
}
.channelStyle {
  padding: 10px 0 10px 10px;
  border-bottom: 1px rgba(0, 0, 0, 0.08) solid;
}
.payment-popup label {
  display: inline;
}
.add-payment-info:hover {
  cursor: pointer;
}
.cursor {
  cursor: pointer;
  padding-left: 1rem;
}
.payment-popup .center {
  text-align: end;
  padding-bottom: 10px;
}
#paymentForm {
  display: inline-grid;
  width: 100%;
  border: 1px rgba(0, 0, 0, 0.08) solid; 
}
.form-scroll {
  max-height: 75%;
  overflow-y: overlay;
}
.end-section {
  max-height: 20%;
}
.summary-details {
  margin: 1rem;
}
.summary-details .block {
  display: inline-grid;
  margin: auto 1rem;
}
.buttonGroup {
  margin: 15px 0;
  align-items: center;
  justify-content: center;
}
.buttonCollapse {
  border: none;
  background-color: transparent;
}
.buttonCollapse:focus {
  border: none;
  outline: none;
}
.buttonCollapse:hover {
  color: rgb(255, 99, 88);
}
.toggle-add-collapse {
  display: flex;
  justify-content: space-around;
}

.toggle-add-collapse label:hover {
  color: rgb(255, 99, 88);
}
.payment-form {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px rgba(0, 0, 0, 0.08) solid;
}
.payment-form .k-textbox {
  float: right;
}
.payment-form label {
  margin-right: 1rem;
}
.payment-form td:nth-child(even) {
  padding-left: 1rem;
}
.payment-form .k-numerictextbox {
  float: right;
}
.payment-form .k-dropdown {
  float: right;
}
.payment-form .k-datepicker {
  float: right;
}
.display-block {
  display: flex !important;
  width: max-content;
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  display: none;
}
.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
.numbercell-style-fluid {
  width: 100% !important;
  font-family: Tahoma;
  font-size: 9.5pt;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}


.InputTotal {
  font-size: 14.25pt;
  font-family: Tahoma;
  text-align: end;
  padding-right: 0.5em;
  float: right;
}
.total-collect {
  margin: 1em;
  display: flex;
  justify-content: space-around;
}
.marginRight {
  margin-right: 1em;
}
.my-custom-icon-class:before {
  content: "\E122";
  /* Adds a glyph using the Unicode character number */
}
.my-custom-icon-class:hover::before {
  content: "\E123";
}
.title-type-payment {
  font-size: 11.4pt;
  font-family: Tahoma;
  text-align: start;
  margin: 0 0 0 1em;
  padding: 0;
  display: block;
  text-decoration: underline;
}
.table-cash,
.table-cheque,
.table-credit {
  float: right;
}
.table-cash table tbody tr td,
.table-cheque table tbody tr td,
.table-credit table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 1em;
}
.table-excess-amount {
  float: right;
}
.table-excess-amount table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 0em;
}
.receipt-template {
  border: 1px solid #ddd;
  height: 100%;
  padding: 0.5em;
  border-radius: 5%;
}
.receipt-template .title {
  text-decoration: underline;
}
.receipt-template table.receipt-table {
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.receipt-template table.receipt-table .text-bold {
  font-weight: bold;
}
.receipt-template table.receipt-table tbody tr {
  box-sizing: border-box;
}
.receipt-template table.receipt-table tbody tr:hover {
  background-color: #f5f5f5;
}
.receipt-template table.receipt-table tbody tr td {
  padding: 0.2em 0.4em;
}
.receipt-template table.receipt-table tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.receipt-template table.receipt-table tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.receipt-template table.receipt-table tbody tr td.text-right {
  text-align: right;
}
.receipt-template table.receipt-table tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.table-summary thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary tbody {
  display: block;
  overflow-y: auto;
}
.table-summary tbody tr:hover {
  background-color: #f5f5f5;
}
.table-summary tbody tr td {
  padding: 0.3em 1em;
}
.table-summary tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-summary tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.table-summary tbody tr td.text-right {
  text-align: right;
}
.table-summary thead,
.table-summary tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary thead th:nth-child(1),
.table-summary tr th:nth-child(1),
.table-summary thead td:nth-child(1),
.table-summary tr td:nth-child(1) {
  width: 60%;
}
.table-summary thead th:nth-child(2),
.table-summary tr th:nth-child(2),
.table-summary thead td:nth-child(2),
.table-summary tr td:nth-child(2) {
  width: 30%;
}
.table-summary thead th:nth-child(3),
.table-summary tr th:nth-child(3),
.table-summary thead td:nth-child(3),
.table-summary tr td:nth-child(3) {
  width: 10%;
}
.table-summary tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary tfoot tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-coupon {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
}


.InputTotal {
  font-size: 14.25pt;
  font-family: Tahoma;
  text-align: end;
  padding-right: 0.5em;
  float: right;
}
.total-collect {
  margin: 1em;
  display: flex;
  justify-content: space-around;
}
.marginRight {
  margin-right: 1em;
}
.my-custom-icon-class:before {
  content: "\E122";
  /* Adds a glyph using the Unicode character number */
}
.my-custom-icon-class:hover::before {
  content: "\E123";
}
.title-type-payment {
  font-size: 11.4pt;
  font-family: Tahoma;
  text-align: start;
  margin: 0 0 0 1em;
  padding: 0;
  display: block;
  text-decoration: underline;
}
.table-cash,
.table-cheque,
.table-credit {
  float: right;
}
.table-cash table tbody tr td,
.table-cheque table tbody tr td,
.table-credit table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 1em;
}
.table-excess-amount {
  float: right;
}
.table-excess-amount table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 0em;
}
.receipt-template {
  border: 1px solid #ddd;
  height: 100%;
  padding: 0.5em;
  border-radius: 5%;
}
.receipt-template .title {
  text-decoration: underline;
}
.receipt-template table.receipt-table {
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.receipt-template table.receipt-table .text-bold {
  font-weight: bold;
}
.receipt-template table.receipt-table tbody tr {
  box-sizing: border-box;
}
.receipt-template table.receipt-table tbody tr:hover {
  background-color: #f5f5f5;
}
.receipt-template table.receipt-table tbody tr td {
  padding: 0.2em 0.4em;
}
.receipt-template table.receipt-table tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.receipt-template table.receipt-table tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.receipt-template table.receipt-table tbody tr td.text-right {
  text-align: right;
}
.receipt-template table.receipt-table tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.table-summary thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary tbody {
  display: block;
  overflow-y: auto;
}
.table-summary tbody tr:hover {
  background-color: #f5f5f5;
}
.table-summary tbody tr td {
  padding: 0.3em 1em;
}
.table-summary tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-summary tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.table-summary tbody tr td.text-right {
  text-align: right;
}
.table-summary thead,
.table-summary tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary thead th:nth-child(1),
.table-summary tr th:nth-child(1),
.table-summary thead td:nth-child(1),
.table-summary tr td:nth-child(1) {
  width: 60%;
}
.table-summary thead th:nth-child(2),
.table-summary tr th:nth-child(2),
.table-summary thead td:nth-child(2),
.table-summary tr td:nth-child(2) {
  width: 30%;
}
.table-summary thead th:nth-child(3),
.table-summary tr th:nth-child(3),
.table-summary thead td:nth-child(3),
.table-summary tr td:nth-child(3) {
  width: 10%;
}
.table-summary tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary tfoot tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-coupon {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
}

.cndn-dialog .react-calendar {
  position: fixed !important;
}

.so-deposit-dialog .react-calendar {
  position: fixed !important;
}

.text-rs-scdid-success {
  font-family: Tahoma;
  font-size: 9.5pt;
  line-height: 20.9pt;
  color: rgba(0, 0, 255, 0.7);
}
.text-rs-scdid-error {
  font-family: Tahoma;
  font-size: 9.5pt;
  line-height: 20.9pt;
  color: red;
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


.InputTotal {
  font-size: 14.25pt;
  font-family: Tahoma;
  text-align: end;
  padding-right: 0.5em;
  float: right;
}
.total-collect {
  margin: 1em;
  display: flex;
  justify-content: space-around;
}
.marginRight {
  margin-right: 1em;
}
.my-custom-icon-class:before {
  content: "\E122";
  /* Adds a glyph using the Unicode character number */
}
.my-custom-icon-class:hover::before {
  content: "\E123";
}
.title-type-payment {
  font-size: 11.4pt;
  font-family: Tahoma;
  text-align: start;
  margin: 0 0 0 1em;
  padding: 0;
  display: block;
  text-decoration: underline;
}
.table-cash,
.table-cheque,
.table-credit {
  float: right;
}
.table-cash table tbody tr td,
.table-cheque table tbody tr td,
.table-credit table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 1em;
}
.receipt-template {
  border: 1px solid #ddd;
  height: 100%;
  padding: 0.5em;
  border-radius: 5%;
}
.receipt-template .title {
  text-decoration: underline;
}
.receipt-template table.receipt-table {
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.receipt-template table.receipt-table .text-bold {
  font-weight: bold;
}
.receipt-template table.receipt-table tbody tr {
  box-sizing: border-box;
}
.receipt-template table.receipt-table tbody tr:hover {
  background-color: #f5f5f5;
}
.receipt-template table.receipt-table tbody tr td {
  padding: 0.2em 0.4em;
}
.receipt-template table.receipt-table tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.receipt-template table.receipt-table tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.receipt-template table.receipt-table tbody tr td.text-right {
  text-align: right;
}
.receipt-template table.receipt-table tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.table-summary thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary tbody {
  display: block;
  overflow-y: auto;
}
.table-summary tbody tr:hover {
  background-color: #f5f5f5;
}
.table-summary tbody tr td {
  padding: 0.3em 1em;
}
.table-summary tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-summary tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.table-summary tbody tr td.text-right {
  text-align: right;
}
.table-summary thead,
.table-summary tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary thead th:nth-child(1),
.table-summary tr th:nth-child(1),
.table-summary thead td:nth-child(1),
.table-summary tr td:nth-child(1) {
  width: 60%;
}
.table-summary thead th:nth-child(2),
.table-summary tr th:nth-child(2),
.table-summary thead td:nth-child(2),
.table-summary tr td:nth-child(2) {
  width: 30%;
}
.table-summary thead th:nth-child(3),
.table-summary tr th:nth-child(3),
.table-summary thead td:nth-child(3),
.table-summary tr td:nth-child(3) {
  width: 10%;
}
.table-summary tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary tfoot tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-coupon {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}

.InputTotal {
  font-size: 14.25pt;
  font-family: Tahoma;
  text-align: end;
  padding-right: 0.5em;
  float: right;
}
.total-collect {
  margin: 1em;
  display: flex;
  justify-content: space-around;
}
.marginRight {
  margin-right: 1em;
}
.my-custom-icon-class:before {
  content: "\E122";
  /* Adds a glyph using the Unicode character number */
}
.my-custom-icon-class:hover::before {
  content: "\E123";
}
.title-type-payment {
  font-size: 11.4pt;
  font-family: Tahoma;
  text-align: start;
  margin: 0 0 0 1em;
  padding: 0;
  display: block;
  text-decoration: underline;
}
.table-cash,
.table-cheque,
.table-credit {
  float: right;
}
.table-cash table tbody tr td,
.table-cheque table tbody tr td,
.table-credit table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 1em;
}
.receipt-template {
  border: 1px solid #ddd;
  height: 100%;
  padding: 0.5em;
  border-radius: 5%;
}
.receipt-template .title {
  text-decoration: underline;
}
.receipt-template table.receipt-table {
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.receipt-template table.receipt-table .text-bold {
  font-weight: bold;
}
.receipt-template table.receipt-table tbody tr {
  box-sizing: border-box;
}
.receipt-template table.receipt-table tbody tr:hover {
  background-color: #f5f5f5;
}
.receipt-template table.receipt-table tbody tr td {
  padding: 0.2em 0.4em;
}
.receipt-template table.receipt-table tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.receipt-template table.receipt-table tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.receipt-template table.receipt-table tbody tr td.text-right {
  text-align: right;
}
.receipt-template table.receipt-table tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.table-summary thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary tbody {
  display: block;
  overflow-y: auto;
}
.table-summary tbody tr:hover {
  background-color: #f5f5f5;
}
.table-summary tbody tr td {
  padding: 0.3em 1em;
}
.table-summary tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-summary tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.table-summary tbody tr td.text-right {
  text-align: right;
}
.table-summary thead,
.table-summary tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary thead th:nth-child(1),
.table-summary tr th:nth-child(1),
.table-summary thead td:nth-child(1),
.table-summary tr td:nth-child(1) {
  width: 60%;
}
.table-summary thead th:nth-child(2),
.table-summary tr th:nth-child(2),
.table-summary thead td:nth-child(2),
.table-summary tr td:nth-child(2) {
  width: 30%;
}
.table-summary thead th:nth-child(3),
.table-summary tr th:nth-child(3),
.table-summary thead td:nth-child(3),
.table-summary tr td:nth-child(3) {
  width: 10%;
}
.table-summary tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary tfoot tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-coupon {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}
.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}
.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.inf-so-overwrite-dialog .innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.inf-so-overwrite-dialog .react-calendar {
  position: fixed !important;
}
.inf-so-overwrite-dialog .k-grid .k-grid-edit-row td,
.inf-so-overwrite-dialog .k-grid .k-command-cell,
.inf-so-overwrite-dialog .k-grid .k-edit-cell {
  border-bottom: 1px solid #f5f5f5;
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.credit-detail {
  margin-left: 25px !important;
  margin-bottom: 10px !important;
}
.approve-confirm-topic {
  font-size: 1.875em !important;
  font-weight: 600 !important;
}
.approve-confirm-label {
  font-size: 1.2em !important;
  font-weight: 400 !important;
}
.approve-confirm-number {
  font-size: 1.2em !important;
  font-weight: 600 !important;
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}

.k-header>.k-checkbox {
    display: none;
}

.k-header>.k-checkbox-lable {
    content: 'hi! im after';
}
.inf-so-overwrite-dialog .innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.inf-so-overwrite-dialog .react-calendar {
  position: fixed !important;
}
.inf-so-overwrite-dialog .k-grid .k-grid-edit-row td,
.inf-so-overwrite-dialog .k-grid .k-command-cell,
.inf-so-overwrite-dialog .k-grid .k-edit-cell {
  border-bottom: 1px solid #f5f5f5;
}


.InputTotal {
  font-size: 14.25pt;
  font-family: Tahoma;
  text-align: end;
  padding-right: 0.5em;
  float: right;
}
.total-collect {
  margin: 1em;
  display: flex;
  justify-content: space-around;
}
.marginRight {
  margin-right: 1em;
}
.my-custom-icon-class:before {
  content: "\E122";
  /* Adds a glyph using the Unicode character number */
}
.my-custom-icon-class:hover::before {
  content: "\E123";
}
.title-type-payment {
  font-size: 11.4pt;
  font-family: Tahoma;
  text-align: start;
  margin: 0 0 0 1em;
  padding: 0;
  display: block;
  text-decoration: underline;
}
.table-cash,
.table-cheque,
.table-credit {
  float: right;
}
.table-cash table tbody tr td,
.table-cheque table tbody tr td,
.table-credit table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 1em;
}
.table-excess-amount {
  float: right;
}
.table-excess-amount table tbody tr td {
  height: 2.8em;
  text-align: right;
  padding-right: 0em;
}
.receipt-template {
  border: 1px solid #ddd;
  height: 100%;
  padding: 0.5em;
  border-radius: 5%;
}
.receipt-template .title {
  text-decoration: underline;
}
.receipt-template table.receipt-table {
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.receipt-template table.receipt-table .text-bold {
  font-weight: bold;
}
.receipt-template table.receipt-table tbody tr {
  box-sizing: border-box;
}
.receipt-template table.receipt-table tbody tr:hover {
  background-color: #f5f5f5;
}
.receipt-template table.receipt-table tbody tr td {
  padding: 0.2em 0.4em;
}
.receipt-template table.receipt-table tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.receipt-template table.receipt-table tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.receipt-template table.receipt-table tbody tr td.text-right {
  text-align: right;
}
.receipt-template table.receipt-table tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  font-family: Tahoma;
}
.table-summary thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary tbody {
  display: block;
  overflow-y: auto;
}
.table-summary tbody tr:hover {
  background-color: #f5f5f5;
}
.table-summary tbody tr td {
  padding: 0.3em 1em;
}
.table-summary tbody tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-summary tbody tr td.total-td {
  border-bottom: 1px solid #ddd;
}
.table-summary tbody tr td.text-right {
  text-align: right;
}
.table-summary thead,
.table-summary tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-summary thead th:nth-child(1),
.table-summary tr th:nth-child(1),
.table-summary thead td:nth-child(1),
.table-summary tr td:nth-child(1) {
  width: 60%;
}
.table-summary thead th:nth-child(2),
.table-summary tr th:nth-child(2),
.table-summary thead td:nth-child(2),
.table-summary tr td:nth-child(2) {
  width: 30%;
}
.table-summary thead th:nth-child(3),
.table-summary tr th:nth-child(3),
.table-summary thead td:nth-child(3),
.table-summary tr td:nth-child(3) {
  width: 10%;
}
.table-summary tfoot tr td {
  border-bottom: 1px solid #ddd;
  width: 33%;
  padding: 0.5em 1em;
}
.table-summary tfoot tr td.total-item {
  text-align: right;
  padding-right: 1em;
}
.table-coupon {
  float: left;
  padding-left: 5px;
  padding-top: 5px;
}

/* .k-animation-container {
    z-index: 7;
} */

.nav-left {
    z-index: 1;
}
.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
}

.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer .buttonWidgetAnnotation.pushButton > canvas {
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
}

.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  background-image: var(--annotation-unfocused-field-background);
  border: 1px solid transparent;
  box-sizing: border-box;
  font-size: 9px;
  height: 100%;
  margin: 0;
  padding: 0 3px;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  font: message-box;
  font-size: 9px;
  resize: none;
}

.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  background: none;
  border: 1px solid transparent;
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
  border: 1px solid rgba(0, 0, 0, 1);
}

.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 1px solid transparent;
}

.annotationLayer .textWidgetAnnotation input :focus,
.annotationLayer .textWidgetAnnotation textarea :focus,
.annotationLayer .choiceWidgetAnnotation select :focus,
.annotationLayer .buttonWidgetAnnotation.checkBox :focus,
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  background-image: none;
  background-color: transparent;
  outline: auto;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  background-color: rgba(0, 0, 0, 1);
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  appearance: none;
  padding: 0;
}

.annotationLayer .popupWrapper {
  position: absolute;
  width: 20em;
}

.annotationLayer .popup {
  position: absolute;
  z-index: 200;
  max-width: 20em;
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
  border-radius: 2px;
  padding: 6px;
  margin-left: 5px;
  cursor: pointer;
  font: message-box;
  font-size: 9px;
  white-space: normal;
  word-wrap: break-word;
}

.annotationLayer .popup > * {
  font-size: 9px;
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: 5px;
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: 2px;
  padding-top: 2px;
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.innerTable {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.components-field-input {
  background-color: transparent !important;
}
.components-field-input > input.k-textbox {
  width: 100%;
}
.components-field-input.error > input.k-textbox {
  border-color: #dc3545 !important;
}
.components-field-input .wrapper-hint {
  display: flex;
  justify-content: space-between;
}
.components-field-input .wrapper-hint > .hint-error {
  color: #dc3545;
}
.components-field-input .wrapper-hint > .hint-max-length {
  opacity: 0.4;
  line-height: 16px;
  font-size: smaller;
}

.timepicker-popup.k-animation-container.k-animation-container-relative {
  width: 300px;
}