:root {
  --indigo: #6610f2;
  --purple-light5: #e9e5f1;
  --purple-light2: #b29dd8;
  --purple-light1: #7851c0;
  --purple: #6f42c1;
  --purple-dark: #3d04a7;
  --purple-dark2: #283b72;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange-light5: #f9efe6;
  --orange-light2: #ffbf8a;
  --orange: #fd7e14;
  --orange-dark: #ff5200;
  --yellow-light: #fff2ce;
  --yellow: #ffc107;
  --yellow-dark: #b48700;
  --teal: #20c997;
  --cyan: #17a2b8;
  --cyan-dark: #2f7d89;
  --white: #fff;
  --gray-light: #7d868d;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #5867dd;
  --secondary: #e1e1ef;
  --success: #1dc9b7;
  --info: #5578eb;
  --warning: #ffb822;
  --danger: #fd397a;
  --light: #f5f8fa;
  --light2: #e0e8ea;
  --light3: #e8eef5;
  --light4:rgba(0,0,0,0.02);
  --light-grey: #d9dfe2;
  --dark: #343a40;
  --dark3: #3e4551;
  --color_fill: #f00;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --btn-primary: #5d78ff;
  --frame-background: #fff;
  --body-background: #f4f6f6;
  --hover-color: #f8f9fa;
  --header-height: 3.6rem;
  --left-nav-width: 14rem;
  --left-nav-width-collapsed: 14rem;
  --scrollbar-width: 6px;
  --primary-text-color: #555;
  --border-radious: 0.25rem;
  --green-light5: #eef8f3;
  --green-light4: #e5faef;
  --green-light3: #b4ecd0;
  --green-light2: #59c5a6;
  --green-light1: #09a174;
  --green: #09946a;
  --green-dark1: #08815d;
  --green-dark2: #087453;
  --green-dark3: #007e33;
  --green-dark4: #1b5e20;
  --blue-light5: #e3f2fd;
  --blue-light4: #bbdefb;
  --blue-light3: #90caf9;
  --blue-light2: #64b5f6;
  --blue-light1: #42a5f5;
  --blue: #2196f3;
  --blue-dark1: #1e88e5;
  --blue-dark2: #1976d2;
  --blue-dark3: #1565c0;
  --blue-dark4: #0d47a1;
  --blue-dark5: #013d82;
  --blue-dark6: #013877;
  --blue-dark7: #192b49;
  --steel:#4d668c;
  --max-content-width: 1280px;
  --table-border-color: #dfe2e5;
  --sidebar-width:260px;
  --sidebar-width-collapsed:66px;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoe-ui/light_latest.eot"),
    url("../fonts/segoe-ui/light_latest.eot?#iefix") format("embedded-opentype");
  src: local("Segoe UI Light"),
    url("../fonts/segoe-ui/light_latest.woff2") format("woff2"),
    url("../fonts/segoe-ui/light_latest.woff") format("woff"),
    url("../fonts/segoe-ui/light_latest.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoe-ui/semilight_latest.eot"),
    url("../fonts/segoe-ui/semilight_latest.eot?#iefix")
      format("embedded-opentype");
  src: local("Segoe UI Semilight"),
    url("../fonts/segoe-ui/semilight_latest.woff2") format("woff2"),
    url("../fonts/segoe-ui/semilight_latest.woff") format("woff"),
    url("../fonts/segoe-ui/semilight_latest.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoe-ui/normal_latest.eot"),
    url("../fonts/segoe-ui/normal_latest.eot?#iefix")
      format("embedded-opentype");
  src: local("Segoe UI"),
    url("../fonts/segoe-ui/normal_latest.woff2") format("woff"),
    url("../fonts/segoe-ui/normal_latest.woff") format("woff"),
    url("../fonts/segoe-ui/normal_latest.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoe-ui/semibold_latest.eot"),
    url("../fonts/segoe-ui/semibold_latest.eot?#iefix")
      format("embedded-opentype");
  src: local("Segoe UI Semibold"),
    url("../fonts/segoe-ui/semibold_latest.woff2") format("woff"),
    url("../fonts/segoe-ui/semibold_latest.woff") format("woff"),
    url("../fonts/segoe-ui/semibold_latest.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoe-ui/bold_latest.eot"),
    url("../fonts/segoe-ui/bold_latest.eot?#iefix") format("embedded-opentype");
  src: local("Segoe UI Bold"),
    url("../fonts/segoe-ui/bold_latest.woff2") format("woff"),
    url("../fonts/segoe-ui/bold_latest.woff") format("woff"),
    url("../fonts/segoe-ui/bold_latest.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

html {
  text-rendering: optimizeLegibility;
  font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6rem;
  letter-spacing: 0.03rem;
  font-weight: 200;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--light);
}

body,
ul,
p,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

h1 {
  font-size: 36px;
  font-weight: 200;
  line-height: 1.8rem;
}

h2 {
  font-size: 28px;
  font-weight: 200;
  line-height: 1.8rem;
}

h3 {
  font-size: 24px;
  font-weight: 200;
  line-height: 1.8rem;
}

h4 {
  font-size: 22px;
  font-weight: 200;
  line-height: 1.8rem;
}

a {
  text-decoration: none;
}

input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="number"],
textarea
{
  background-clip: padding-box;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #666;
  margin: 0;
  outline: 0;
  padding: 0.25rem;
  position: relative;
  -webkit-appearance: none;
}

textarea{
  resize: vertical;
}

textarea:disabled {
  background-color: var(--light4) !important;
}

input:disabled {
  background-color: var(--light4) !important;
}

select {
  background-clip: padding-box;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #666;
  margin: 0;
  outline: 0;
  padding: 0.25rem;
  position: relative;
}

input:invalid:required {
  border: 1px solid var(--orange);
  background: white url(../img/icon/asterisk.svg) no-repeat;
  background-position: right 6px center;
  background-size: 16px 16px;
}

.required:after {
  color: #e32;
  content: "*";
  padding-left: 4px;
  display: inline;
}

input::placeholder {
  color: #bbb;
}

table {
  border-collapse: collapse;
  display: table;
}

.table-list {
  border-collapse: collapse;
  border: 1px solid var(--table-border-color);
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 3px;
}

.table-list thead tr {
  background: var(--light2);
}

.table-list thead th {
  padding: 6px 12px;
  vertical-align: middle;
  border-right: 1px solid var(--table-border-color);
  font-weight: 400;
  text-align: left;
}

.table-list > tbody > tr {
  cursor: pointer;
}
.table-list > tbody > tr:hover {
  background-color: var(--light2);
}

.table-list tbody tr td {
  padding: 4px 12px;
  border-top: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  vertical-align: middle;
  color: var(--primary-text-color);
}

.wrap{
  white-space: normal;
}

.full-width {
  width: 100%;
}

.flex {
  display: flex;
}
.font-bold {
  font-weight: 400;
}
.font-bolder {
  font-weight: 600;
}

.mr-4 {
  margin-right: 1rem;
}
.ml-4 {
  margin-left: 1rem;
}

.mr-3 {
  margin-right: 0.75rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mt-1 {
  margin-top: 0.2rem;
}

.mb-0-important{
  margin-bottom: 0 !important;
}

.mb-1-important{
  margin-bottom: 0.2rem !important;
}
.mt-2 {
  margin-top: 0.4rem;
}
.mb-2 {
  margin-bottom: 0.4rem;
}

.mt-4 {
  margin-top: 1rem;
}
.mt-2rem {
  margin-top: 2rem;
}

.mt-3rem {
  margin-top: 3rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-2rem {
  margin-bottom: 2rem;
}

.pt-1em{
  padding-top: 1em;
}
.pb-1em{
  padding-bottom: 1em;
}

.pl-1em{
  padding-left: 1em;
}
.pr-1em{
  padding-right:1em;
}

.hidden{
  display: none;
}
.visible{
  display: inline;
}

.placeholder{
  background-color: var(--light4);
}

.narrow-screen{
  display: none;
}

.info-item:not(:last-child) {
  margin-right: 8px;
}
.label-light {
  color: var(--gray-light);
  padding-right: 4px;
}


.icon-small {
  height: 12px;
  width: 12px;
}

.icon {
  height: 24px;
  width: 24px;
}
.icon-mid {
  height: 20px;
  width: 20px;
}
.icon64{
  width: 64px;
  height: 64px;
}

.bottom-line{
  border-bottom: 1px solid var(--light-grey);
}

ul.flex-table>.table-row {
  display: flex;
}

ul.flex-table>.table-row:not(:last-child) {
  border-bottom: 1px solid var(--light2);
}


ul.flex-table>.table-row.table-header {
  background-color: var(--light3);
  font-weight: 400;
}

ul.flex-table>.table-row>.table-data{
  display: flex;
  flex:1;
  padding-left:12px;
}

ul.flex-table>.table-row>.table-data>.table-cell{
  padding:6px 4px;
  flex:1;
}

ul.flex-table>.table-row>.table-control{
  display: flex;
  min-width: 80px;
  padding: 6px 4px;
}

ul.flex-table>.table-row>.table-cell {
  flex:1;
  padding:6px 4px;
}

.button-link{
  cursor: pointer;
}

.switch{
  display: flex;
}
.switch .switch-item{
  display:flex;
  background: var(--light3);
  border:1px solid var(--light-grey);
  padding: 8px 16px;
  cursor: pointer;
  color: var(--gray-light);
  align-items: center;
  justify-content: center;
  min-width: 110px;
}


.switch .switch-item.selected{
  color: var(--light-grey);
  border:1px solid #157979;
  background-color: #188a8a;
}

ul.list-alternate>li{
  padding: 1rem;
}
ul.list-alternate>li:nth-child(odd){
  background-color: var(--light4);
}

ul.bullete-list{
  list-style-type: square;
  list-style-position: inside;
}

.success {
  border: 1px solid var(--green-dark3);
  color: var(--green-dark3);
  background: var(--green-light4) url(../img/icon/success.svg) no-repeat;
  background-position: left 6px center;
  background-size: 22px 22px;
  padding-left: 36px !important;
}

.error {
  border: 1px solid var(--orange-dark);
  /* background-color: var(--orange-light5); */
  color: var(--orange-dark);
  background: var(--orange-light5) url(../img/icon/error-icon.svg) no-repeat;
  background-position: left 6px center;
  background-size: 22px 22px;
  padding-left: 36px !important;
}

.form-status.warning {
  border: 1px solid var(--orange);
  color: var(--orange-dark);
  background: var(--yellow-light) url(../img/icon/error-icon.svg) no-repeat;
  background-position: left 6px center;
  background-size: 22px 22px;
  padding-left: 36px !important;
}

.form-item-label.warning{
  color: var(--orange-dark);
}


.notification-count {
    background-color: #26a69a;
    color: #fff;
    padding: 1px 6px;
    line-height: 1.4em;
    position: relative;
    top: -8px;
    right: 13px;
    font-size: .8em;
    font-weight: 700;
    border-radius: 50rem;
    border: 2px solid #FFFFFF;
    height: 18px;
}

.date-label {
  width: 82px;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-wrapper {
  height: var(--header-height);
  background-color: var(--blue-dark7);
  position: fixed;
  width: 100vw;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1000;
  box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  /* max-width: var(--max-content-width); */
  margin: 0 auto;
}

.header-left{
  display: flex;
  flex:1;
  align-items: center;
  width: var(--sidebar-width);
}

.header-right{
  /*flex:1;*/
}

.header-title {
    padding-left: 16px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
}

.page-title{
  padding:16px;
  font-size: 1.3rem;
  color:var(--dark3);
  background: var(--light4);
}


.icon > img {
  width: 24px;
  vertical-align: middle;
}

.signin > a {
  padding: 0.25rem 1rem;
  color: #fff;
  text-decoration: none;
}

.signin > a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.top-signup > button:not(:last-child) {
  border-right: 1px solid #0e2c53;
}

.strong {
  font-weight: 600;
}

.signin-expanded {
  display: flex;
}

.signin > a > img {
  width: 24px;
  padding-left: 8px;
}

.title-text {
  font-size: 1.3rem;
  padding-bottom: 12px;
}

.note-list {
  padding: 24px 0 16px 0;
}
.note-item {
  background-color: var(--light3);
  padding: 8px;
}
.note-time {
  color: var(--gray);
  padding-right: 24px;
}
.note-body {
  color: var(--primary-text-color);
}

/*------------------------------------*\
    NAV
\*------------------------------------*/

.topnav-collapsed {
  display: none;
  margin-left: 24px;
  cursor: pointer;
}

.topnav-collapsed > a {
  padding: 4px 8px 8px;
}
/*
.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.top-menu li {
  float: left;
  position: relative;
}

.top-menu a {
  display: block;
  padding: 0.4rem 1rem;
  color: #fff;
  text-decoration: none;
}

.top-menu a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.nav-selected {
  background-color: rgba(255, 255, 255, 0.1);
}


.top-menu li:hover ul {
  left: 0;
  width: 400px;
  background-color: var(--blue-dark7);
}

.top-menu li:hover a {

  background-color: rgba(255, 255, 255, 0.2);
}

.top-menu li:hover ul li a:hover {
  background-color: var(--blue-dark7);
}

.top-menu ul {
  background-color: var(--green-light);
  list-style: none;
  position: absolute;
  left: -9999px;
}

.top-menu ul li {
  padding-top: 1px;
  float: none;
}

.top-menu ul a {
  white-space: nowrap;
} */

/*New menu */

.nav-header{
  display: flex;
  margin-left: auto;
}
.nav-wrapper {
  padding: 0 16px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  /* -webkit-box-align: center; */
  /* -ms-flex-align: center; */
  /* align-items: center; */
  /* max-width: var(--max-content-width); */

}
.nav a {
  display: block;
  /* background: var(--blue-dark7); */
  color: #fff;
  padding: 0.8em 1.8em;
  position: relative;
}
.nav {
  vertical-align: top;
  display: inline-block;
}
.nav li {
  position: relative;
  background: var(--blue-dark7);
}
.nav > li {
  float: left;
  margin-right: 1px;
}
.nav > li > a {
  margin-bottom: 1px;
}
.nav > li:hover,
.nav > li:hover > a {
  /* background-color: rgba(255, 255, 255, 0.1); */
}
.nav li:hover > a {
  /* color: #fff; */
  background-color: rgba(255, 255, 255, 0.2);
}
.nav > li:last-child {
  margin-right: 0;
}
.nav li li a {
  margin-top: 1px;
}

.nav li a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 6px solid transparent;
  top: 50%;
  right: 6px;
}

/* submenu positioning*/
.nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  background-color: var(--blue-dark7);
}
.nav > li:hover > ul {
  left: auto;
  padding-top: 3px;
  min-width: 100%;
}
.nav > li li ul {
  border-left: 1px solid #fff;
}

.nav > li li:hover > ul {
  /* margin-left: 1px */
  left: 100%;
  top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before {
  border-top-color: #aaa;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 6px solid transparent;
  border-bottom-color: var(--green-light4);
  margin-top: -6px;
}
.nav li li > a:first-child:nth-last-child(2):before {
  border-left-color: #aaa;
  margin-top: -6px;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  border-right-color: var(--green-light4);
  right: 10px;
}

.nav-selected {
  background-color: rgba(255, 255, 255, 0.1);
}

/*end of nav menu*/


/*sidebar*/

.sidebar {
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  z-index: 100;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #FFFFFF;
  border-right: 1px solid #e7e7e7;
  float: left;
  width: var(--sidebar-width);
  font-size: 1.0rem;
  box-sizing: border-box;
}




.sidebar.sidebar-collapsed {
  width: var(--sidebar-width-collapsed);
  -webkit-transition: width .5s;
  transition: width .5s;
}

.sidebar.sidebar-collapsed:hover {
  width: var(--sidebar-width);
}


.content-wrapper.sidebar-collapsed{
  margin-left: var(--sidebar-width-collapsed);
}
.sidebar.sidebar-collapsed > ul > li > a.sidebar-item > span.sidebar-item-label{
  display: none;
}

.sidebar.sidebar-collapsed:hover > ul > li > a.sidebar-item > span.sidebar-item-label{
  display: block;
}

.sidebar-item{
  display: flex;
  color: #555;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* padding-right: 12px; */
  cursor: pointer;
}

.sidebar-item:hover{
  background-color: #e7e7e7;
}



.sidebar-selected {
  background-color: #e7e7e7;
}

.icon-container{
  display: flex;
  min-width: 66px;
  min-height: 56px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon-sidebar-menu {
    display: flex;
    align-items: center;
    padding: 16px 20px 16px 21px;
    cursor: pointer;
}

.icon-sidebar-menu:hover{
  background-color: rgba(255, 255, 255, 0.1);
}

/*End of sidebar*/


/*Popup mobile menu*/

.popup-menu {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* background-color: rgb(0, 0, 0); */
  /* background-color: rgba(46, 87, 126, 0.9); */
  /* background-color: #092860; */
  /* background-color: #092860f5; */
  overflow-x: hidden;
  transition: 0.5s;

  background: rgba(128, 128, 128, 0.6);
  backdrop-filter: blur(2px);

}

.popup-menu-content {
  position: relative;
  /* top: 25%;
  width: 100%; */
  /* text-align: center; */
  margin-top: 60px;
}

.popup-menu-items {
  /* padding: 0; */
  padding-left: 16px;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: auto;
}

.popup-menu-items > li {
  padding: 0.4rem;
  display: block;
  border-radius: 4px;
  color: #fff;
  width: 120px;
  height: 120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  background-color: var(--blue-dark4);
  cursor: pointer;
}

.popup-menu-items > li:hover {
  background-color: var(--blue-dark3);
}

.popup-menu-items > li > img {
  padding: 16px;
  flex: 1;
  height: 32px;
}

.popup-menu-items > li > .popup-menu-icon-label {
  margin-top: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.popup-menu-items > li {
  margin: 0 16px 16px 0;
}

.popup-menu .closebtn {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 48px;
  cursor: pointer;
  color: #fff;
}

/*End of popup mobile menu*/


.offcanvas {
    top: 0;
    right: 0;
    width: 460px;
    border-left: 1px solid rgba(0, 0, 0, .2);
    position: fixed;
    bottom: 0;
    z-index: 9999;
    max-width: 100%;
    color: #212529;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    background-clip: padding-box;
    outline: 0;
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

/*custom dropdown*/

.wrapper-demo {
  zoom: 1;
  font-weight: 400;
}

.wrapper-demo:after {
  clear: both;
  content: "";
  display: table;
}


.wrapper-dropdown-1 {
  position: relative;
  padding: 2px 24px 2px 8px;
  margin: 0 auto;
  z-index: 100;
  background:#fff;
  outline: none;
  cursor: pointer;
  border:1px solid #ddd;
}

.wrapper-dropdown-1:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent var(--dark3);
}

.wrapper-dropdown-1 .dropdown {
  box-shadow: 0 8px 8px -4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: var(--light3);
  list-style: none;
  font-weight: normal;
  opacity: 0;
  pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li{
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
}

.wrapper-dropdown-1 .dropdown li:hover{
  background: #f3f8f8;
}

.wrapper-dropdown-1.active .dropdown {
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  max-height: 600px;
}

.wrapper-dropdown-1.active:after {
  border-color: var(--dark3) transparent;
  border-width: 6px 6px 0 6px ;
  margin-top: -3px;
}


/*end of custom dropdown*/

.popup-dialog{
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  background: rgba(128, 128, 128, 0.6);
  backdrop-filter: blur(2px);
  margin-top: var(--header-height);
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */

}

.dialog-container{
  margin-left: calc(var(--sidebar-width) + 24px);
  margin-right: 24px;
  margin-bottom: 2rem;
  padding:40px;
  background-color: var(--light);
}

.popup-dialog .closebtn {
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 48px;
  cursor: pointer;
  color: #fff;
}


.clickable {
  cursor: pointer;
}

.clickable:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.body-wrapper {
  padding-top: var(--header-height);
  flex: 1 0 auto;
}

.content-wrapper {
  height: 100%;
  margin-left: var(--sidebar-width);
}

.section-header{
  font-size: 1.4rem;
  font-weight: 400;
  color:var(--blue-dark5);
  margin-top: 1.8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--light-grey);
  margin-bottom: 1.2rem;
}

.section-content {
  /* max-width: var(--max-content-width); */
  padding: 8px 16px;
  margin: 0 auto;
  position: relative;
}
.section-gray-light1 {
  background: #e2ebf2;
}

.section-body {
  /* padding: 32px 0; */
  border: 1px solid #ccc;
  margin-top: -1px;
  padding-top: 24px;
}

.tile-container-dashboard {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr);; */
  grid-gap: 2rem;
}



.tile-item{
  border: 1px solid var(--table-border-color);
  background-color: #fff;
  box-shadow: 0 8px 16px 0 rgb(40 40 90 / 9%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

.tile-container-dashboard:last-child{
  padding-bottom: 2rem;

}

.tile-header{
  padding: 6px 16px;
  background-color: var(--steel);
  color: #fff;
  display: flex;
}
.tile-body{

}
.tile-footer{
  display: flex;
  padding: 4px 16px;
  background-color: var(--light4);
  font-size: 0.9rem;
}

.tile-footer-label{
  flex:1;
}
.tile-footer-tool{
  display: flex;
}

.stat-container {
  display: flex;
}
.stat-content {
  display: flex;
  padding: 16px;
  background-color: var(--light);

  border-color: #e6e6e6;
  border-style: solid;
  border-width: 1px 1px 0 1px;

  position: relative;
  top: -1px;
}

.stat-content.selected {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  /* border-bottom: 1px solid var(--light); */
  top: 0;
}

.stat-container .stat-content:last-child {
  margin-left: auto;
}
.tile {
  padding: 0.8rem;
  background-color: var(--blue-dark4);
  color: #fff;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.tile-label {
  padding-right: 16px;
}
.tile > img {
  width: 32px;
}

.stat-container .tile:not(:last-child) {
  margin-right: 8px;
}

/* .stat-container .tile:last-child {
  margin-left: auto;
} */

.stat-container .stat-content .tile .icon-label {
  display: flex;
}

.stat-container .stat-content .tile .icon-label > img {
  width: 24px;
  padding-right: 12px;
}

.stat-container .stat-content .tile .icon-label > span {
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block; */
}

.bg-white{
  background-color: #ffffff;
}

.bg-green-l1 {
  background-color: var(--green-light1);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-orange {
  background-color: var(--orange);
}

.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  color: #fff;
  background-color: var(--green);
  outline: 0;
  padding: 2px 6px;
  cursor: pointer;
}
.btn:hover {
  background-color: var(--green-light1);
}


.btn-primary {
  background-color: var(--green);
  border: 1px solid transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
  padding: 6px 8px;
}
.btn-primary-outline {
  background-color: var(--white);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 6px 8px;
  cursor: pointer;
}

.btn-primary-outline:hover {
  background-color: var(--green-light4);
}

.btn-blue{
  background-color: var(--blue-dark4);
}

.btn-blue:hover{
  background-color: var(--blue-dark3);
}


.btn-purple{
  background-color: var(--purple);
}

.btn-purple:hover{
  background-color: var(--purple-light1);
}



.btn-icon {
  padding: 4px 8px;
  display: flex;
}

.btn-icon:hover {
  background-color: var(--light2);
  cursor: pointer;
}

.btn-cross {
  background-image: url(/img/icon/cross.svg);
}
.btn-icon-small {
  cursor: pointer;
  width: 20px;
  height: 20px;
  border: 1px solid #D8D8D8;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
}


.btn-group > button:not(:last-child) {
  margin-right: 16px;
}

.notifications {
  padding: 1em;
}

.msg-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.msg-list-item {
  padding: 1em;
  border-left: 3px solid #00D07EFF;
  margin-bottom: .4em;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.08), 0 5px 26px 0 rgba(67,94,131,.15);
  cursor:pointer;
}

.msg-visited {
  opacity: .6;
  border-left: 3px solid #b6b6b6;
}

.msg-title {
  color: #333;
  font-weight: 600;
  font-size: .9em;
}

.msg-light-text {
  font-size: .8em;
  font-weight: 300;
  color: #777;
}

.msg-desc{
  color: #666;
  font-weight: 300;
  font-size: .9em;
}

/*Panel*/

.panel {
  border: 1px solid var(--light-grey);
}
.panel * {
  box-sizing: border-box;
}

.panel .panel-header {
  display: flex;
  background-color: var(--light2);
  padding: 8px;
}
.panel .panel-header .panel-header-label {
  margin-right: auto;
}

.panel .panel-sub-header {
  display: flex;
  padding: 8px 8px 0 8px;
}

.panel-body {
  padding: 16px 8px;
}

.panel-body-no-bottom {
  padding: 16px 8px 0;
}

.panel-columns{
  display: flex;
  flex-wrap: wrap;
}
.panel-column{
   flex: 1 0 460px;
}

.panel-column:not(:last-child){
  padding-right: 32px;
}



.panel-row {
  display: flex;
  flex-wrap: wrap;
}

.panel-item {
  padding: 4px 0;
  display: flex;
  flex: 1 0 320px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.panel-item-label {
  flex: 1 0 96px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block; */
}
.panel-item-value {
  flex: 1 0 220px;
  background-color: var(--light3);
  padding: 2px 8px;
  min-height: 28px;
  height:100%;
}

.panel-footer {
  border-top: 1px solid var(--light2);
  padding: 16px 8px;
  display: flex;
  justify-content: flex-end;
}

.panel-status {
  flex: 1;
  margin-right: 16px;
  padding: 0 8px;
}

/*End of Panel*/

/*Form*/

.form {
  /* max-width: 1024px;
  margin: 0 auto; */
  border: 1px solid var(--light-grey);
}

.form * {
  box-sizing: border-box;
}

.form .form-header {
  display: flex;
  background-color: var(--light2);
  padding: 8px;
}
.form .form-header .form-header-label {
  margin-right: auto;
}
.form-body {
  padding: 16px 8px;
}
.form-desc {
  padding-bottom: 24px;
  color:var(--blue-dark4);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
}
.form-columns{
  display: flex;
  flex-wrap: wrap;
}
.form-column{
   flex: 1 0 460px;
}

.form-column:not(:last-child){
  padding-right: 32px;
}


.form-item {
  display: flex;
  flex: 1 0 320px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  /* margin-right: 40px; */
}

.form-item-label {
  flex: 1 0 80px;
  /* overflow: hidden;
  text-overflow: ellipsis; */
  white-space: nowrap;
  display: block;
}

.form-item-label-multi-line {
  flex: 1 0 80px;
  white-space: normal;
  display: block;
}

.form-item-desc {
  font-style: italic;
}

.wrap {
  white-space: pre-wrap;
}


.form-item-value {
  flex: 1 0 260px;
}

.form-item select {
  width: 100%;
}


.form-item-value-mid {
  flex: 1 0 220px;
}


.form-item-label-short {
  flex: 1 0 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.form-item-value-short {
  flex: 1 0 120px;
}

.form-footer {
  border-top: 1px solid var(--light2);
  padding: 16px;
  display: flex;
}

.form-status {
  flex: 1;
  margin-right: 16px;
  padding: 0 8px;
}


.label-group > label {
  margin-right: 24px;
  display: inline-block;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.label-group-block > label {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-form {
  width: 500px;
}

.login-header {
  padding: 8px 16px;
  background-color: var(--blue-light4);
}

.login-form .form-body {
  padding: 16px;
}

/*End of form*/

.summary-item {
  border: 1px solid var(--table-border-color);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 16px 0 rgba(40, 40, 90, 0.09),
    0 3px 6px 0 rgba(0, 0, 0, 0.065);
}

.summary-header {
  padding: 6px 16px;
  background-color: var(--blue-dark4);
  color: #fff;
  display: flex;
}

.summary-header > h4 {
  flex: 1;
}

.summary-footer {
  display: flex;
  padding: 4px 16px;
  background-color: var(--light2);
  font-size: 0.9rem;
}

.summary-footer-tool {
  display: flex;
}

.summary-footer-tool:hover {
  background-color: var(--light);
}

.status{
  white-space: nowrap;
}

.status-green {
  padding: 0 4px 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--green-light2);
  background-color: var(--green-light5);
  color: var(--green-dark3);
  font-size: 0.8rem;
}

.status-purple {
  padding: 0 4px 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--purple-light2);
  background-color: var(--purple-light5);
  color: var(--purple-dark);
  font-size: 0.8rem;
}

.status-orange {
  padding: 0 4px 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--orange-light2);
  background-color: var(--orange-light5);
  color: var(--orange-dark);
  font-size: 0.8rem;
}
.status-grey {
  padding: 0 4px 2px 4px;
  border-radius: 3px;
  border: 1px solid var(--light-grey);
  background-color: var(--light3);
  color: var(--gray-dark);
  font-size: 0.8rem;
}

/*flex List*/


.summary-item > .list {
  flex: 1 0 auto;
}

.summary-item .list .list-item {
  font-size: 0.9rem;
}

.list-item {
  display: flex;
  cursor: pointer;
  padding: .75rem .8rem;

}

.list-item:not(:last-child){
  border-bottom: 1px solid var(--light2);
}

.list-item:hover{
  background-color: var(--light3);
}
/*
.list-item:not(:first-child) {
  cursor: pointer;
}
.list-item:not(:first-child):hover {
  background-color: var(--light-grey);
}

.list-item:not(:first-child):not(:last-child) {
  margin-bottom: 8px;
} */

li.list-item::before{
  display: inline-block;
    content: '';
    margin-top: .4rem;
    -webkit-border-radius: 0.375rem;
    border-radius: 0.375rem;
    height: 0.75rem;
    width: 0.75rem;
    margin-right: 0.5rem;
    background-color: #bdbdbd;
}

li.list-item.green::before {
  background-color:var(--green-dark1);
}
li.list-item.purple::before {
  background-color:var(--purple);
}
li.list-item.orange::before {
  background-color:var(--orange-dark);
}

.list-item.bullet::before{
  display: inline-block;
    content: '';
    margin-top: .4rem;
    -webkit-border-radius: 0.375rem;
    border-radius: 0.375rem;
    height: 0.75rem;
    width: 0.75rem;
    margin-right: 0.5rem;
    background-color: #bdbdbd;
}

.list-item.bullet.green::before {
  background-color:var(--green-dark1);
}
.list-item.bullet.purple::before {
  background-color:var(--purple);
}
.list-item.bullet.orange::before {
  background-color:var(--orange-dark);
}

.legend .list-item{
  pointer-events: none;
}





.list-item-body {
  flex-wrap: wrap;
}

.item-body-primary {
  padding-right: 8px;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}
.flex-6 {
  flex: 6;
}


.flex-vcenter{
  display: flex;
  align-items: center;
  /* justify-content: center; */
  height:100%;
}

.flex-hcenter{
  display: flex;
  justify-content: center;
}

.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
}

.flex-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.push-left{
  margin-right: auto;
}

.push-right{
  margin-left: auto;
}


.list-header {
  background-color: var(--light2);
}
.list-footer{
  padding:8px 16px;
  background-color: var(--light2);
}

.list-footer .footer-message{
  flex: 1;
    margin-right: 16px;
    padding: 0 8px;
}

/*end of flex list*/

/*info box*/

.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.info-label {
  flex: 1 0 96px;
  max-width: 220px;
  padding: 8px 0;
}
.info-value {
  flex: 1 0 220px;
  padding: 2px 4px;
  background-color: var(--light2);
}

/**/

/*Loading*/

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
}
.loading > h3 {
  padding-right: 8px;
}

.loader-bar span {
  display: inline-block;
  width: 6px;
  height: 20px;
  background-color: var(--green);
  margin-right: 4px;
}
.loader-bar span:nth-child(1) {
  animation: grow 1s ease-in-out infinite;
}
.loader-bar span:nth-child(2) {
  animation: grow 1s ease-in-out 0.12s infinite;
}
.loader-bar span:nth-child(3) {
  animation: grow 1s ease-in-out 0.24s infinite;
}
.loader-bar span:nth-child(4) {
  animation: grow 1s ease-in-out 0.36s infinite;
}
.loader-bar span:nth-child(5) {
  animation: grow 1s ease-in-out 0.48s infinite;
}
@-moz-keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}
@-webkit-keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}
@-o-keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}
@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}

/*End of loading */

/*Error*/
.red {
  color: var(--red);
}

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.error-container {
  display: flex;
  padding: 6rem;
  margin: 2rem;
  border: 1px solid var(--orange-dark);
  background-color: #fff3de;
}
.error-container > img {
  width: 64px;
  padding-right: 32px;
}

/*End of error*/

/*Footer*/

.footer-wrapper {
  background-color: var(--gray-dark);
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  flex-shrink: 0;
}

.footer {
  color: rgba(255, 255, 255, 0.8);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 24px;
  font-size: 16px;
  padding:16px 0 16px var(--sidebar-width)
}

.footer a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.footer a:hover {
  color: var(--green-light2);
}

.footer .footer-wide {
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  grid-column: 1 / 5;
  padding: 0 16px;
}

.footer .footer-header {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gray);
}

.footer-section ul > li {
  padding: 4px 0;
}

.footer-section .footer-fluide {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(160px, 1fr)) [auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.footer-section .contact-item {
  padding: 12px 0 0 32px;
}

.footer-section .contact-item.icon-call {
  background: url(../img/icon/phone.svg) no-repeat;
  background-size: 18px 18px;
  background-position: left top 14px;
}
.footer-section .contact-item.icon-address {
  background: url(../img/icon/pin.svg) no-repeat;
  background-size: 18px 18px;
  background-position: left top 14px;
}

/* end of footer*/

/* .sv_q_matrix_dynamic>thead>tr{
  border-top: 1px solid #e7e7e7 !important;

}

.sv_main .sv_p_root table th{
  border-right: 1px solid #e7e7e7 !important;
}

.sv_main .sv_p_root table th:first-child{
  border-left: 1px solid #e7e7e7 !important;
}

.sv_main .sv_p_root table td{
  margin: 0 !important;
  border-right: 1px solid #e7e7e7 !important;
}

.sv_main .sv_p_root table td:first-child {
  border-left: 1px solid #e7e7e7 !important;
}

.sv_q_text_root:disabled{
  padding: 0 !important;
  border:none !important;
} */

@media print {

  .no-print {
      visibility: hidden;
      display: none;
  }

  .sv_q_matrix_dynamic>thead>tr{
    border-top: 1px solid #e7e7e7 !important;

  }

  .sv_main .sv_p_root table th{
    border-right: 1px solid #e7e7e7 !important;
  }

  .sv_main .sv_p_root table th:first-child{
    border-left: 1px solid #e7e7e7 !important;
  }

  .sv_main .sv_p_root table td{
    margin: 0 !important;
    border-right: 1px solid #e7e7e7 !important;
  }
  
  .sv_main .sv_p_root table td:first-child {
    border-left: 1px solid #e7e7e7 !important;
  }

  .sv_q_text_root:disabled{
    padding: 0 !important;
    border:none !important;
    width: 100% !important;
  }
  

}




@media (max-width: 1024px) {
  .topnav-expanded {
    display: none;
  }

    .topnav-collapsed {
        display: flex;
        align-items: center;
    }

  .signin-expanded {
    display: none;
  }

  .tile-container-dashboard {
    grid-template-columns: repeat(1, 1fr);
  }

  .sidebar,.header-left .icon-container{
    display: none;
  }
.header{
  padding-left: 16px;
  padding-right: 8px;
}

  .content-wrapper{
    margin-left: 0;
  }

}

@media (max-width: 800px) {


 .form-column{
    padding-right: 0;
}

  .footer {
    grid-template-columns: 1fr;
  }

  .footer .footer-wide {
    grid-column: 1;
  }

  .panel-row {
    display: block;
  }

  .panel-item:not(:last-child) {
    margin-right: 0;
  }

  .form-row {
    display: block;
  }
  .panel-column:not(:last-child), .form-column:not(:last-child) {
    margin-right: 0;
    padding-right: 0;
  }
}


@media (max-width:640px){
  /* .tile{
    padding:.4rem;
  }
  .tile img{
    display: none;
  }

  .tile-label>h2{
    font-size: 1.2rem;
  } */

  .form-column {
    flex: 1;
  }

  li.list-item{
    display: block;
    padding-left: 24px;
    position: relative;
  }
  li.list-item::before{
    position: absolute;
    left: 6px;
  }

.info-item{
  display: block;
}


  .wide-screen{
    display: none;
  }
  .narrow-screen{
    display: block;
  }

  .splitted{
    display: block;
  }

  .splitted>.mr-3{
    margin-right: 0;
  }

.splitted .form-item-label-short{
  flex:1 0 100px;
}

.splitted .form-item-value-short{
  flex: 1 0 220px;
}

  .stat-content .tile{
    display: none;
  }

  ul.flex-table>.table-row.table-header{
    display: none;
  }

  ul.flex-table>.table-row>.table-data {
    display: inline;
  }

  ul.flex-table>.table-row>.table-data>.table-cell {
    padding: 1px 4px;
  }

  ul.flex-table>.table-row>.table-data>.table-cell:before {
      padding-right: 10px;
      white-space: nowrap;
      text-align:left;
      color: var(--gray-light);
  }

  ul.flex-table>.table-row>.table-data>.table-cell:before { content: attr(data-title); }

}